add task list

src/graphql/fragments/ebpf.ts

@@ -33,12 +33,15 @@ export const createEBPFTask = {
   }`,
 };
 export const queryEBPFTasks = {
-  variable: "$serviceId: ID!",
+  variable:
+    "$serviceId: ID, $serviceInstanceId: ID, $targets: [EBPFProfilingTargetType!]",
   query: `
-  queryEBPFTasks: queryEBPFProfilingTasks(serviceId: $serviceId) {
+  queryEBPFTasks: queryEBPFProfilingTasks(serviceId: $serviceId, serviceInstanceId: $serviceInstanceId, targets: $targets) {
     taskId
     serviceName
     serviceId
+    serviceInstanceId
+    serviceInstanceName
     processLabels
     taskStartTime
     triggerType
@@ -90,3 +93,22 @@ export const analysisEBPFResult = {
     }
   }`,
 };
+
+export const createNetworkProfiling = {
+  variable: "$request: EBPFProfilingNetworkTaskRequest!",
+  query: `
+  createEBPFNetworkProfiling(request: $request) {
+    status
+    errorReason
+    id
+  }`,
+};
+
+export const keepNetworkProfiling = {
+  variable: "$taskId: ID!",
+  query: `
+  keepEBPFNetworkProfiling(taskId: $taskId) {
+    status
+    errorReason
+  }`,
+};

src/graphql/query/ebpf.ts

@@ -21,6 +21,8 @@ import {
   queryEBPFTasks,
   queryEBPFSchedules,
   analysisEBPFResult,
+  createNetworkProfiling,
+  keepNetworkProfiling,
 } from "../fragments/ebpf";
 
 export const getCreateTaskData = `query queryCreateTaskData(${queryCreateTaskData.variable}) {${queryCreateTaskData.query}}`;
@@ -32,3 +34,7 @@ export const getEBPFTasks = `query queryEBPFTasks(${queryEBPFTasks.variable}) {$
 export const getEBPFSchedules = `query queryEBPFSchedules(${queryEBPFSchedules.variable}) {${queryEBPFSchedules.query}}`;
 
 export const getEBPFResult = `query analysisEBPFResult(${analysisEBPFResult.variable}) {${analysisEBPFResult.query}}`;
+
+export const saveNetworkProfiling = `mutation createNetworkProfiling(${createNetworkProfiling.variable}) {${createNetworkProfiling.query}}`;
+
+export const aliveNetworkProfiling = `mutation keepNetworkProfiling(${keepNetworkProfiling.variable}) {${keepNetworkProfiling.query}}`;

src/store/modules/ebpf.ts

@@ -1,3 +1,4 @@
+import { TaskListItem } from "./../../types/profile.d";
 /**
  * Licensed to the Apache Software Foundation (ASF) under one or more
  * contributor license agreements.  See the NOTICE file distributed with
@@ -28,13 +29,16 @@ import { AxiosResponse } from "axios";
 
 interface EbpfStore {
   taskList: EBPFTaskList[];
+  networkTasks: EBPFTaskList[];
   eBPFSchedules: EBPFProfilingSchedule[];
   currentSchedule: EBPFProfilingSchedule | Record<string, never>;
   analyzeTrees: AnalyzationTrees[];
   labels: Option[];
   couldProfiling: boolean;
   tip: string;
+  networkTip: string;
   selectedTask: Recordable<EBPFTaskList>;
+  selectedNetworkTask: Recordable<EBPFTaskList>;
   aggregateType: string;
 }
 
@@ -42,18 +46,24 @@ export const ebpfStore = defineStore({
   id: "eBPF",
   state: (): EbpfStore => ({
     taskList: [],
+    networkTasks: [],
     eBPFSchedules: [],
     currentSchedule: {},
     analyzeTrees: [],
     labels: [{ value: "", label: "" }],
     couldProfiling: false,
     tip: "",
+    networkTip: "",
     selectedTask: {},
+    selectedNetworkTask: {},
     aggregateType: "COUNT",
   }),
   actions: {
     setSelectedTask(task: EBPFTaskList) {
-      this.selectedTask = task;
+      this.selectedTask = task || {};
+    },
+    setSelectedNetworkTask(task: EBPFTaskList) {
+      this.selectedNetworkTask = task || {};
     },
     setCurrentSchedule(s: EBPFProfilingSchedule) {
       this.currentSchedule = s;
@@ -84,24 +94,44 @@ export const ebpfStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.getTaskList(param.serviceId);
+      this.getTaskList({
+        serviceId: param.serviceId,
+        targets: ["ON_CPU", "OFF_CPU"],
+      });
       return res.data;
     },
-    async getTaskList(serviceId: string) {
-      if (!serviceId) {
+    async getTaskList(params: {
+      serviceId: string;
+      serviceInstanceId: string;
+      targets: string[];
+    }) {
+      if (!params.serviceId) {
         return new Promise((resolve) => resolve({}));
       }
       const res: AxiosResponse = await graphql
         .query("getEBPFTasks")
-        .params({ serviceId });
+        .params(params);
 
-      this.tip = "";
-      if (res.data.errors) {
-        return res.data;
-      }
-      this.taskList = res.data.data.queryEBPFTasks || [];
-      if (!this.taskList.length) {
-        return res.data;
+      if (params.serviceInstanceId) {
+        this.networkTip = "";
+        if (res.data.errors) {
+          return res.data;
+        }
+        this.networkTasks = res.data.data.queryEBPFTasks || [];
+        if (!this.networkTasks.length) {
+          return res.data;
+        }
+        this.selectedNetworkTask = this.networkTasks[0] || {};
+        this.setSelectedNetworkTask(this.selectedNetworkTask);
+      } else {
+        this.tip = "";
+        if (res.data.errors) {
+          return res.data;
+        }
+        this.taskList = res.data.data.queryEBPFTasks || [];
+        if (!this.taskList.length) {
+          return res.data;
+        }
       }
       this.getEBPFSchedules({ taskId: this.taskList[0].taskId });
       return res.data;

src/views/dashboard/controls/NetworkProfiling.vue

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="profile-wrapper flex-v">
+    <div class="title">Network Profiling</div>
     <el-popover
       placement="bottom"
       trigger="click"
@@ -21,8 +22,8 @@ limitations under the License. -->
       v-if="dashboardStore.editMode"
     >
       <template #reference>
-        <span class="delete cp">
-          <Icon iconName="ellipsis_v" size="middle" class="operation" />
+        <span class="operation cp">
+          <Icon iconName="ellipsis_v" size="middle" />
         </span>
       </template>
       <div class="tools" @click="removeWidget">
@@ -49,7 +50,7 @@ const props = defineProps({
 });
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
-console.log("enter");
+
 function removeWidget() {
   dashboardStore.removeControls(props.data);
 }
@@ -62,9 +63,9 @@ function removeWidget() {
   position: relative;
 }
 
-.delete {
+.operation {
   position: absolute;
-  top: 5px;
+  top: 8px;
   right: 3px;
 }
 
@@ -87,8 +88,10 @@ function removeWidget() {
   }
 }
 
-.trace {
-  width: 100%;
-  overflow: auto;
+.title {
+  font-weight: bold;
+  line-height: 40px;
+  padding: 0 10px;
+  border-bottom: 1px solid #dcdfe6;
 }
 </style>

src/views/dashboard/related/ebpf/Header.vue

@@ -57,7 +57,10 @@ if (props.needQuery) {
 async function searchTasks() {
   const serviceId =
     (selectorStore.currentService && selectorStore.currentService.id) || "";
-  const res = await ebpfStore.getTaskList(serviceId);
+  const res = await ebpfStore.getTaskList({
+    serviceId,
+    targets: ["ON_CPU", "OFF_CPU"],
+  });
 
   if (res.errors) {
     ElMessage.error(res.errors);

src/views/dashboard/related/network-profiling/components/Tasks.vue

@@ -0,0 +1,237 @@
+<!-- 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") }}
+        <el-button type="primary" size="small" @click="createTask">
+          {{ t("newTask") }}
+        </el-button>
+      </div>
+      <div class="profile-t-wrapper">
+        <div class="no-data" v-show="!ebpfStore.networkTasks.length">
+          {{ t("noData") }}
+        </div>
+        <table class="profile-t">
+          <tr
+            class="profile-tr cp"
+            v-for="(i, index) in ebpfStore.networkTasks"
+            @click="changeTask(i)"
+            :key="index"
+          >
+            <td
+              class="profile-td"
+              :class="{
+                selected: ebpfStore.selectedNetworkTask.taskId === i.taskId,
+              }"
+            >
+              <div class="ell">
+                <span>
+                  {{
+                    i.targetType +
+                    ": " +
+                    (i.processLabels.length
+                      ? i.processLabels.join(" ")
+                      : `All Processes`)
+                  }}
+                </span>
+                <a class="profile-btn 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"
+  >
+    <div class="profile-detail flex-v">
+      <div>
+        <h5 class="mb-10">{{ t("task") }}.</h5>
+        <div class="mb-10 clear item">
+          <span class="g-sm-4 grey">{{ t("taskId") }}:</span>
+          <span class="g-sm-8 wba">
+            {{ ebpfStore.selectedNetworkTask.taskId }}
+          </span>
+        </div>
+        <div class="mb-10 clear item">
+          <span class="g-sm-4 grey">{{ t("service") }}:</span>
+          <span class="g-sm-8 wba">{{
+            ebpfStore.selectedNetworkTask.serviceName
+          }}</span>
+        </div>
+        <div class="mb-10 clear item">
+          <span class="g-sm-4 grey">{{ t("labels") }}:</span>
+          <span class="g-sm-8 wba">
+            {{ ebpfStore.selectedNetworkTask.processLabels.join(";") }}
+          </span>
+        </div>
+        <div class="mb-10 clear item">
+          <span class="g-sm-4 grey">{{ t("monitorTime") }}:</span>
+          <span class="g-sm-8 wba">
+            {{ dateFormat(ebpfStore.selectedNetworkTask.taskStartTime) }}
+          </span>
+        </div>
+        <div class="mb-10 clear item">
+          <span class="g-sm-4 grey">{{ t("monitorDuration") }}:</span>
+          <span class="g-sm-8 wba">
+            {{ ebpfStore.selectedNetworkTask.fixedTriggerDuration / 60 }} min
+          </span>
+        </div>
+        <div class="mb-10 clear item">
+          <span class="g-sm-4 grey">{{ t("triggerType") }}:</span>
+          <span class="g-sm-8 wba">{{
+            ebpfStore.selectedNetworkTask.triggerType
+          }}</span>
+        </div>
+        <div class="mb-10 clear item">
+          <span class="g-sm-4 grey">{{ t("targetType") }}:</span>
+          <span class="g-sm-8 wba">{{
+            ebpfStore.selectedNetworkTask.targetType
+          }}</span>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</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 { useSelectorStore } from "@/store/modules/selectors";
+import { EBPFTaskList } from "@/types/ebpf";
+import { ElMessage } from "element-plus";
+
+const { t } = useI18n();
+const selectorStore = useSelectorStore();
+const ebpfStore = useEbpfStore();
+const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+  dayjs(date).format(pattern);
+const viewDetail = ref<boolean>(false);
+
+fetchTasks();
+
+async function changeTask(item: EBPFTaskList) {
+  ebpfStore.setSelectedNetworkTask(item);
+  const res = await ebpfStore.getEBPFSchedules({
+    taskId: item.taskId,
+  });
+  if (res.errors) {
+    ElMessage.error(res.errors);
+  }
+}
+async function createTask() {
+  if (!selectorStore.currentService) {
+    return;
+  }
+  if (!selectorStore.currentInstance) {
+    return;
+  }
+  ebpfStore.getCreateTaskData(selectorStore.currentService.id);
+}
+async function fetchTasks() {
+  const serviceId =
+    (selectorStore.currentService && selectorStore.currentService.id) || "";
+  const serviceInstanceId =
+    (selectorStore.currentPod && selectorStore.currentPod.id) || "";
+  const res = await ebpfStore.getTaskList({
+    serviceId,
+    serviceInstanceId,
+    targets: ["NETWORK"],
+  });
+
+  if (res.errors) {
+    ElMessage.error(res.errors);
+  }
+}
+</script>
+<style lang="scss" scoped>
+.profile-task-list {
+  width: 300px;
+  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: 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;
+}
+
+.profile-btn {
+  color: #3d444f;
+  padding: 1px 3px;
+  border-radius: 2px;
+  font-size: 12px;
+  float: right;
+}
+</style>