From fade4ca93f683071778772e1779a6e232316b9e9 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Mon, 18 Apr 2022 21:19:58 +0800
Subject: [PATCH] get task list

---
 src/assets/icons/view.svg                     |  15 ++
 src/graphql/fragments/ebpf.ts                 |  13 ++
 src/graphql/query/ebpf.ts                     |   8 +-
 src/store/modules/ebpf.ts                     |  24 +--
 src/views/dashboard/related/ebpf/Content.vue  |  13 +-
 src/views/dashboard/related/ebpf/Header.vue   |  21 +--
 .../related/ebpf/components/NewTask.vue       |   5 +-
 .../related/ebpf/components/TaskList.vue      | 147 ++++++++++++++++++
 .../related/profile/components/TaskList.vue   |   2 +-
 9 files changed, 212 insertions(+), 36 deletions(-)
 create mode 100644 src/assets/icons/view.svg
 create mode 100644 src/views/dashboard/related/ebpf/components/TaskList.vue

diff --git a/src/assets/icons/view.svg b/src/assets/icons/view.svg
new file mode 100644
index 00000000..4122084d
--- /dev/null
+++ b/src/assets/icons/view.svg
@@ -0,0 +1,15 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<svg t="1650287922642" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3055" width="48" height="48"><path d="M277.333333 325.333333m5.333334 0l325.333333 0q5.333333 0 5.333333 5.333334l0 64q0 5.333333-5.333333 5.333333l-325.333333 0q-5.333333 0-5.333334-5.333333l0-64q0-5.333333 5.333334-5.333334Z" p-id="3056" fill="#707070"></path><path d="M277.333333 474.666667m5.333334 0l325.333333 0q5.333333 0 5.333333 5.333333l0 64q0 5.333333-5.333333 5.333333l-325.333333 0q-5.333333 0-5.333334-5.333333l0-64q0-5.333333 5.333334-5.333333Z" p-id="3057" fill="#707070"></path><path d="M277.333333 624m5.333334 0l247.36 0q5.333333 0 5.333333 5.333333l0 64q0 5.333333-5.333333 5.333334l-247.36 0q-5.333333 0-5.333334-5.333334l0-64q0-5.333333 5.333334-5.333333Z" p-id="3058" fill="#707070"></path><path d="M565.333333 842.666667H186.666667a5.333333 5.333333 0 0 1-5.333334-5.333334V186.666667a5.333333 5.333333 0 0 1 5.333334-5.333334h522.666666v346.24a5.333333 5.333333 0 0 0 5.333334 5.333334h64a5.333333 5.333333 0 0 0 5.333333-5.333334V106.666667H112a5.333333 5.333333 0 0 0-5.333333 5.333333v800a5.333333 5.333333 0 0 0 5.333333 5.333333h453.333333a5.333333 5.333333 0 0 0 5.333334-5.333333v-64a5.333333 5.333333 0 0 0-5.333334-5.333333z" p-id="3059" fill="#707070"></path><path d="M868.426667 723.786667a144.64 144.64 0 1 0-144.64 144.64 144.64 144.64 0 0 0 144.64-144.64z m-144.64 69.973333a69.973333 69.973333 0 1 1 69.973333-69.973333 70.026667 70.026667 0 0 1-69.973333 69.973333z" p-id="3060" fill="#707070"></path><path d="M811.758007 864.533065m3.771237-3.771236l45.254834-45.254834q3.771236-3.771236 7.542472 0l45.254834 45.254834q3.771236 3.771236 0 7.542472l-45.254834 45.254834q-3.771236 3.771236-7.542472 0l-45.254834-45.254834q-3.771236-3.771236 0-7.542472Z" p-id="3061" fill="#707070"></path></svg>
diff --git a/src/graphql/fragments/ebpf.ts b/src/graphql/fragments/ebpf.ts
index e9ca9da6..69cd87fd 100644
--- a/src/graphql/fragments/ebpf.ts
+++ b/src/graphql/fragments/ebpf.ts
@@ -32,3 +32,16 @@ export const createEBPFTask = {
     id
   }`,
 };
+export const queryEBPFTasks = {
+  variable: "$serviceId: ID!",
+  query: `
+  queryEBPFTasks: queryEBPFProfilingTasks(serviceId: $serviceId) {
+    taskId
+    processLabels
+    taskStartTime
+    triggerType
+    fixedTriggerDuration
+    targetType
+    createTime
+  }`,
+};
diff --git a/src/graphql/query/ebpf.ts b/src/graphql/query/ebpf.ts
index f8180934..81c724b7 100644
--- a/src/graphql/query/ebpf.ts
+++ b/src/graphql/query/ebpf.ts
@@ -15,8 +15,14 @@
  * limitations under the License.
  */
 
-import { queryCreateTaskData, createEBPFTask } from "../fragments/ebpf";
+import {
+  queryCreateTaskData,
+  createEBPFTask,
+  queryEBPFTasks,
+} from "../fragments/ebpf";
 
 export const getCreateTaskData = `query queryCreateTaskData(${queryCreateTaskData.variable}) {${queryCreateTaskData.query}}`;
 
 export const saveEBPFTask = `mutation createEBPFTask(${createEBPFTask.variable}) {${createEBPFTask.query}}`;
+
+export const getEBPFTasks = `query queryEBPFTasks(${queryEBPFTasks.variable}) {${queryEBPFTasks.query}}`;
diff --git a/src/store/modules/ebpf.ts b/src/store/modules/ebpf.ts
index f1220d03..e99b802f 100644
--- a/src/store/modules/ebpf.ts
+++ b/src/store/modules/ebpf.ts
@@ -31,7 +31,6 @@ import { useAppStoreWithOut } from "@/store/modules/app";
 
 interface EbpfStore {
   durationTime: Duration;
-  condition: { serviceId: string; endpointName: string };
   taskList: TaskListItem[];
   segmentList: Trace[];
   currentSegment: Trace | Record<string, never>;
@@ -48,7 +47,6 @@ export const ebpfStore = defineStore({
   id: "eBPF",
   state: (): EbpfStore => ({
     durationTime: useAppStoreWithOut().durationTime,
-    condition: { serviceId: "", endpointName: "" },
     taskList: [],
     segmentList: [],
     currentSegment: {},
@@ -61,12 +59,6 @@ export const ebpfStore = defineStore({
     couldProfiling: false,
   }),
   actions: {
-    setConditions(data: { serviceId?: string; endpointName?: string }) {
-      this.condition = {
-        ...this.condition,
-        ...data,
-      };
-    },
     setCurrentSpan(span: Span) {
       this.currentSpan = span;
     },
@@ -91,24 +83,16 @@ export const ebpfStore = defineStore({
       });
       return res.data;
     },
-    async getTaskList() {
+    async getTaskList(serviceId: string) {
       const res: AxiosResponse = await graphql
-        .query("getProfileTaskList")
-        .params(this.condition);
+        .query("getEBPFTasks")
+        .params({ serviceId });
 
       if (res.data.errors) {
         return res.data;
       }
-      const list = res.data.data.taskList;
-      this.taskList = list;
-      if (!list.length) {
-        this.segmentList = [];
-        this.segmentSpans = [];
-        this.analyzeTrees = [];
+      this.taskList = res.data.data.queryEBPFTasks || [];
 
-        return res.data;
-      }
-      this.getSegmentList({ taskID: list[0].id });
       return res.data;
     },
     async getSegmentList(params: { taskID: string }) {
diff --git a/src/views/dashboard/related/ebpf/Content.vue b/src/views/dashboard/related/ebpf/Content.vue
index f692e0de..d72327cd 100644
--- a/src/views/dashboard/related/ebpf/Content.vue
+++ b/src/views/dashboard/related/ebpf/Content.vue
@@ -13,5 +13,16 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div>content</div>
+  <div class="flex-h content">
+    <TaskList />
+  </div>
 </template>
+<script lang="ts" setup>
+import TaskList from "./components/TaskList.vue";
+</script>
+<style lang="scss" scoped>
+.content {
+  height: calc(100% - 30px);
+  width: 100%;
+}
+</style>
diff --git a/src/views/dashboard/related/ebpf/Header.vue b/src/views/dashboard/related/ebpf/Header.vue
index 6400e3f2..d2f7c208 100644
--- a/src/views/dashboard/related/ebpf/Header.vue
+++ b/src/views/dashboard/related/ebpf/Header.vue
@@ -14,7 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="flex-h header">
-    <el-button class="search-btn" size="small" @click="createTask">
+    <div>eBPF Profile</div>
+    <el-button class="new-btn" size="small" @click="createTask">
       {{ t("newTask") }}
     </el-button>
   </div>
@@ -43,18 +44,14 @@ const appStore = useAppStoreWithOut();
 const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const { t } = useI18n();
-const endpointName = ref<string>("");
 const newTask = ref<boolean>(false);
 
-// searchTasks();
+searchTasks();
 
 async function searchTasks() {
-  ebpfStore.setConditions({
-    serviceId:
-      (selectorStore.currentService && selectorStore.currentService.id) || "",
-    endpointName: endpointName.value,
-  });
-  const res = await ebpfStore.getTaskList();
+  const serviceId =
+    (selectorStore.currentService && selectorStore.currentService.id) || "";
+  const res = await ebpfStore.getTaskList(serviceId);
 
   if (res.errors) {
     ElMessage.error(res.errors);
@@ -66,7 +63,7 @@ async function createTask() {
     return;
   }
   newTask.value = true;
-  await ebpfStore.getCreateTaskData(selectorStore.currentService.id);
+  ebpfStore.getCreateTaskData(selectorStore.currentService.id);
 }
 
 watch(
@@ -94,4 +91,8 @@ watch(
 .name {
   width: 270px;
 }
+
+.new-btn {
+  float: right;
+}
 </style>
diff --git a/src/views/dashboard/related/ebpf/components/NewTask.vue b/src/views/dashboard/related/ebpf/components/NewTask.vue
index 62fa0b89..6a0283ef 100644
--- a/src/views/dashboard/related/ebpf/components/NewTask.vue
+++ b/src/views/dashboard/related/ebpf/components/NewTask.vue
@@ -124,9 +124,8 @@ async function createTask() {
     ElMessage.error(res.errors);
     return;
   }
-  const { tip } = res.data;
-  if (tip) {
-    ElMessage.error(tip);
+  if (!res.data.createTaskData.status) {
+    ElMessage.error(res.data.createTaskData.errorReason);
     return;
   }
   ElMessage.success("Task created successfully");
diff --git a/src/views/dashboard/related/ebpf/components/TaskList.vue b/src/views/dashboard/related/ebpf/components/TaskList.vue
new file mode 100644
index 00000000..ce625cf0
--- /dev/null
+++ b/src/views/dashboard/related/ebpf/components/TaskList.vue
@@ -0,0 +1,147 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="profile-task-list flex-v">
+    <div class="profile-task-wrapper flex-v">
+      <div class="profile-t-tool flex-h">{{ t("taskList") }}</div>
+      <div class="profile-t-wrapper">
+        <div class="no-data" v-show="!ebpfStore.taskList.length">
+          {{ t("noData") }}
+        </div>
+        <table class="profile-t">
+          <tr
+            class="profile-tr cp"
+            v-for="(i, index) in ebpfStore.taskList"
+            @click="changeTask(i)"
+            :key="index"
+          >
+            <td
+              class="profile-td"
+              :class="{
+                selected: selectedTask.id === i.id,
+              }"
+            >
+              <div class="ell">
+                <span>{{ i.processLabels.join(" ") }}</span>
+                <a class="profile-btn r">
+                  <Icon iconName="view" size="middle" />
+                </a>
+              </div>
+              <div class="grey ell sm">
+                <span class="mr-10 sm">{{ dateFormat(i.taskStartTime) }}</span>
+                <span class="mr-10 sm">
+                  {{
+                    dateFormat(i.taskStartTime + i.fixedTriggerDuration * 1000)
+                  }}
+                </span>
+              </div>
+            </td>
+          </tr>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import dayjs from "dayjs";
+import { useI18n } from "vue-i18n";
+import { useEbpfStore } from "@/store/modules/ebpf";
+import { TaskListItem } from "@/types/profile";
+import { ElMessage } from "element-plus";
+
+const { t } = useI18n();
+const ebpfStore = useEbpfStore();
+const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+  dayjs(date).format(pattern);
+const selectedTask = ref<TaskListItem | Record<string, never>>({});
+
+async function changeTask(item: TaskListItem) {
+  selectedTask.value = item;
+  const res = await ebpfStore.getSegmentList({ taskID: item.id });
+  if (res.errors) {
+    ElMessage.error(res.errors);
+  }
+}
+</script>
+<style lang="scss" scoped>
+.profile-task-list {
+  width: 300px;
+  height: calc((100% - 60px) / 2);
+  overflow: auto;
+}
+
+.item span {
+  height: 21px;
+}
+
+.profile-td {
+  padding: 5px 10px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+
+  &.selected {
+    background-color: #ededed;
+  }
+}
+
+.no-data {
+  text-align: center;
+  margin-top: 10px;
+}
+
+.profile-t-wrapper {
+  overflow: auto;
+  flex-grow: 1;
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.profile-t {
+  width: 100%;
+  border-spacing: 0;
+  table-layout: fixed;
+  flex-grow: 1;
+  position: relative;
+}
+
+.profile-tr {
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+}
+
+.profile-segment {
+  border-top: 1px solid rgba(0, 0, 0, 0.07);
+}
+
+.profile-t-tool {
+  padding: 5px 10px;
+  font-weight: bold;
+  border-right: 1px solid rgba(0, 0, 0, 0.07);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+  background: #f3f4f9;
+}
+
+.log-item {
+  margin-top: 20px;
+}
+
+.profile-btn {
+  color: #3d444f;
+  padding: 1px 3px;
+  border-radius: 2px;
+  font-size: 12px;
+  float: right;
+}
+</style>
diff --git a/src/views/dashboard/related/profile/components/TaskList.vue b/src/views/dashboard/related/profile/components/TaskList.vue
index ca14705a..efcbb03f 100644
--- a/src/views/dashboard/related/profile/components/TaskList.vue
+++ b/src/views/dashboard/related/profile/components/TaskList.vue
@@ -36,7 +36,7 @@ limitations under the License. -->
               <div class="ell">
                 <span>{{ i.endpointName }}</span>
                 <a class="profile-btn r" @click="viewTask($event, i)">
-                  <Icon iconName="library_books" size="middle" />
+                  <Icon iconName="view" size="middle" />
                 </a>
               </div>
               <div class="grey ell sm">