feat: add task list

src/graphql/fragments/ebpf.ts

@@ -34,7 +34,7 @@ export const createEBPFTask = {
 };
 export const queryEBPFTasks = {
   variable:
-    "$serviceId: ID, $serviceInstanceId: ID, $targets: [EBPFProfilingTargetType!], triggerType: EBPFProfilingTriggerType",
+    "$serviceId: ID, $serviceInstanceId: ID, $targets: [EBPFProfilingTargetType!], $triggerType: EBPFProfilingTriggerType",
   query: `
   queryEBPFTasks: queryEBPFProfilingTasks(serviceId: $serviceId, serviceInstanceId: $serviceInstanceId, targets: $targets, triggerType: $triggerType) {
     taskId

src/store/data.ts

@@ -49,8 +49,6 @@ export const ControlsTypes = [
   "ContinuousProfiling",
 ];
 export enum EBPFProfilingTriggerType {
-  // Appoint the task executing total duration
-  FIXED_TIME,
-  // Trigger by the reach the continuous profiling policy
-  CONTINUOUS_PROFILING,
+  FIXED_TIME = "FIXED_TIME",
+  CONTINUOUS_PROFILING = "CONTINUOUS_PROFILING",
 }

src/store/modules/continous-profiling.ts

@@ -23,6 +23,7 @@ import type { AxiosResponse } from "axios";
 import type { Call } from "@/types/topology";
 import type { LayoutConfig } from "@/types/dashboard";
 import type { DurationTime } from "@/types/app";
+import { EBPFProfilingTriggerType } from "../data";
 
 interface ContinousProfilingState {
   strategyList: Array<Recordable<StrategyItem>>;
@@ -156,6 +157,11 @@ export const continousProfilingStore = defineStore({
         };
       });
       this.setSelectedStrategy(this.strategyList[0] || {});
+      this.getContinousTaskList({
+        serviceId: params.serviceId,
+        targets: [this.selectedStrategy.type],
+        triggerType: EBPFProfilingTriggerType.CONTINUOUS_PROFILING,
+      });
       if (!this.strategyList.length) {
         this.nodes = [];
         this.calls = [];

src/views/dashboard/related/continuous-profiling/Content.vue

@@ -16,7 +16,7 @@ limitations under the License. -->
   <div class="flex-h content">
     <div class="list flex-v">
       <PolicyList />
-      <div>tasks</div>
+      <TaskList />
     </div>
     <div>graph</div>
   </div>
@@ -25,6 +25,7 @@ limitations under the License. -->
   import type { PropType } from "vue";
   import { useI18n } from "vue-i18n";
   import PolicyList from "./components/PolicyList.vue";
+  import TaskList from "./components/TaskList.vue";
   /*global defineProps */
   defineProps({
     config: {

src/views/dashboard/related/continuous-profiling/components/PolicyList.vue

@@ -70,6 +70,7 @@ limitations under the License. -->
   import type { StrategyItem, CheckItems } from "@/types/continous-profiling";
   import { ElMessage } from "element-plus";
   import EditPolicy from "./EditPolicy.vue";
+  import { EBPFProfilingTriggerType } from "@/store/data";
 
   const { t } = useI18n();
   const selectorStore = useSelectorStore();
@@ -85,6 +86,12 @@ limitations under the License. -->
 
   async function changePolicy(item: StrategyItem) {
     continousProfilingStore.setSelectedStrategy(item);
+    const serviceId = (selectorStore.currentService && selectorStore.currentService.id) || "";
+    await continousProfilingStore.getContinousTaskList({
+      serviceId,
+      targets: [item.type],
+      triggerType: EBPFProfilingTriggerType.CONTINUOUS_PROFILING,
+    });
   }
 
   function setStrategies() {

src/views/dashboard/related/continuous-profiling/components/TaskList.vue

@@ -0,0 +1,137 @@
+<!-- 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="!continousProfilingStore.taskList.length">
+          {{ t("noData") }}
+        </div>
+        <table class="profile-t">
+          <tr
+            class="profile-tr cp"
+            v-for="(i, index) in continousProfilingStore.taskList"
+            @click="changeTask(i)"
+            :key="index"
+          >
+            <td
+              class="profile-td"
+              :class="{
+                selected: continousProfilingStore.selectedContinousTask.taskId === i.taskId,
+              }"
+            >
+              <div class="ell">
+                <span>
+                  {{ i.targetType + ": " + (i.processLabels.length ? i.processLabels.join(" ") : `All Processes`) }}
+                </span>
+                <a class="profile-view r" @click="viewDetail = true">
+                  <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>
+  <el-dialog v-model="viewDetail" :destroy-on-close="true" fullscreen @closed="viewDetail = false">
+    <TaskDetails :details="continousProfilingStore.selectedTask" />
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+  import { ref } from "vue";
+  import { useI18n } from "vue-i18n";
+  import { useContinousProfilingStore } from "@/store/modules/continous-profiling";
+  import type { EBPFTaskList } from "@/types/ebpf";
+  import TaskDetails from "../../components/TaskDetails.vue";
+  import { dateFormat } from "@/utils/dateFormat";
+
+  const { t } = useI18n();
+  const continousProfilingStore = useContinousProfilingStore();
+  const viewDetail = ref<boolean>(false);
+
+  async function changeTask(item: EBPFTaskList) {
+    continousProfilingStore.setSelectedContinousTask(item);
+  }
+</script>
+<style lang="scss" scoped>
+  .profile-task-list {
+    width: 330px;
+    height: calc(100% - 10px);
+    overflow: auto;
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+  }
+
+  .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;
+  }
+
+  .profile-t {
+    width: 100%;
+    border-spacing: 0;
+    table-layout: fixed;
+    flex-grow: 1;
+    position: relative;
+    border: none;
+  }
+
+  .profile-tr {
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+  }
+
+  .profile-t-tool {
+    padding: 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;
+  }
+
+  .profile-view {
+    color: #3d444f;
+    padding: 1px 3px;
+    border-radius: 2px;
+    font-size: 12px;
+    float: right;
+  }
+</style>