feat: Implement the eBPF profile widget on dashboard (#72)

src/store/modules/dashboard.ts

@@ -114,7 +114,12 @@ export const dashboardStore = defineStore({
               : 3,
         };
       }
-      if (type === "Trace" || type === "Profile" || type === "Log") {
+      if (
+        type === "Trace" ||
+        type === "Profile" ||
+        type === "Log" ||
+        type === "Ebpf"
+      ) {
         newItem.h = 36;
       }
       if (type === "Text") {

src/store/modules/ebpf.ts

@@ -0,0 +1,153 @@
+/**
+ * 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.
+ */
+import { defineStore } from "pinia";
+import { Duration, Option } from "@/types/app";
+import {
+  EBPFTaskCreationRequest,
+  EBPFProfilingSchedule,
+  EBPFTaskList,
+  AnalyzationTrees,
+} from "@/types/ebpf";
+import { Trace, Span } from "@/types/trace";
+import { store } from "@/store";
+import graphql from "@/graphql";
+import { AxiosResponse } from "axios";
+import { useAppStoreWithOut } from "@/store/modules/app";
+
+interface EbpfStore {
+  durationTime: Duration;
+  taskList: EBPFTaskList[];
+  eBPFSchedules: EBPFProfilingSchedule[];
+  currentSchedule: EBPFProfilingSchedule | Record<string, never>;
+  analyzeTrees: AnalyzationTrees[];
+  labels: Option[];
+  couldProfiling: boolean;
+  tip: string;
+}
+
+export const ebpfStore = defineStore({
+  id: "eBPF",
+  state: (): EbpfStore => ({
+    durationTime: useAppStoreWithOut().durationTime,
+    taskList: [],
+    eBPFSchedules: [],
+    currentSchedule: {},
+    analyzeTrees: [],
+    labels: [{ value: "", label: "" }],
+    couldProfiling: false,
+    tip: "",
+  }),
+  actions: {
+    setCurrentSpan(span: Span) {
+      this.currentSpan = span;
+    },
+    setCurrentSchedule(s: Trace) {
+      this.currentSchedule = s;
+    },
+    async getCreateTaskData(serviceId: string) {
+      const res: AxiosResponse = await graphql
+        .query("getCreateTaskData")
+        .params({ serviceId });
+
+      if (res.data.errors) {
+        return res.data;
+      }
+      const json = res.data.data.createTaskData;
+      this.couldProfiling = json.couldProfiling || false;
+      this.labels = json.processLabels.map((d: string) => {
+        return { label: d, value: d };
+      });
+      return res.data;
+    },
+    async createTask(param: EBPFTaskCreationRequest) {
+      const res: AxiosResponse = await graphql
+        .query("saveEBPFTask")
+        .params({ request: param });
+
+      if (res.data.errors) {
+        return res.data;
+      }
+      this.getTaskList(param.serviceId);
+      return res.data;
+    },
+    async getTaskList(serviceId: string) {
+      const res: AxiosResponse = await graphql
+        .query("getEBPFTasks")
+        .params({ serviceId });
+
+      this.tip = "";
+      if (res.data.errors) {
+        return res.data;
+      }
+      this.taskList = res.data.data.queryEBPFTasks.reverse() || [];
+      if (!this.taskList.length) {
+        return res.data;
+      }
+      this.getEBPFSchedules({ taskId: this.taskList[0].taskId });
+      return res.data;
+    },
+    async getEBPFSchedules(params: { taskId: string; duration?: Duration }) {
+      const duration = useAppStoreWithOut().durationTime;
+      const res: AxiosResponse = await graphql
+        .query("getEBPFSchedules")
+        .params({ ...params, duration });
+
+      if (res.data.errors) {
+        this.eBPFSchedules = [];
+        return res.data;
+      }
+      this.tip = "";
+      const { eBPFSchedules } = res.data.data;
+
+      this.eBPFSchedules = eBPFSchedules;
+      if (!eBPFSchedules.length) {
+        this.eBPFSchedules = [];
+      }
+      this.analyzeTrees = [];
+      return res.data;
+    },
+    async getEBPFAnalyze(params: {
+      scheduleIdList: string[];
+      timeRanges: Array<{ start: number; end: number }>;
+    }) {
+      const res: AxiosResponse = await graphql
+        .query("getEBPFResult")
+        .params(params);
+
+      if (res.data.errors) {
+        this.analyzeTrees = [];
+        return res.data;
+      }
+      const { analysisEBPFResult } = res.data.data;
+      this.tip = analysisEBPFResult.tip;
+      if (!analysisEBPFResult) {
+        this.analyzeTrees = [];
+        return res.data;
+      }
+      if (analysisEBPFResult.tip) {
+        this.analyzeTrees = [];
+        return res.data;
+      }
+      this.analyzeTrees = analysisEBPFResult.trees[0].elements;
+      return res.data;
+    },
+  },
+});
+
+export function useEbpfStore(): any {
+  return ebpfStore(store);
+}

src/store/modules/profile.ts

@@ -16,7 +16,7 @@
  */
 import { defineStore } from "pinia";
 import { Duration } from "@/types/app";
-import { Service } from "@/types/selector";
+import { Endpoint } from "@/types/selector";
 import {
   TaskListItem,
   SegmentSpan,
@@ -31,7 +31,8 @@ import { AxiosResponse } from "axios";
 import { useAppStoreWithOut } from "@/store/modules/app";
 
 interface ProfileState {
-  services: Service[];
+  endpoints: Endpoint[];
+  taskEndpoints: Endpoint[];
   durationTime: Duration;
   condition: { serviceId: string; endpointName: string };
   taskList: TaskListItem[];
@@ -47,7 +48,8 @@ interface ProfileState {
 export const profileStore = defineStore({
   id: "profile",
   state: (): ProfileState => ({
-    services: [{ value: "0", label: "All" }],
+    endpoints: [{ value: "", label: "All" }],
+    taskEndpoints: [{ value: "", label: "All" }],
     durationTime: useAppStoreWithOut().durationTime,
     condition: { serviceId: "", endpointName: "" },
     taskList: [],
@@ -75,14 +77,28 @@ export const profileStore = defineStore({
     setHighlightTop() {
       this.highlightTop = !this.highlightTop;
     },
-    async getServices(layer: string) {
-      const res: AxiosResponse = await graphql.query("queryServices").params({
-        layer,
+    async getEndpoints(serviceId: string, keyword?: string) {
+      const res: AxiosResponse = await graphql.query("queryEndpoints").params({
+        serviceId,
+        duration: this.durationTime,
+        keyword: keyword || "",
       });
       if (res.data.errors) {
         return res.data;
       }
-      this.services = res.data.data.services;
+      this.endpoints = [{ value: "", label: "All" }, ...res.data.data.pods];
+      return res.data;
+    },
+    async getTaskEndpoints(serviceId: string, keyword?: string) {
+      const res: AxiosResponse = await graphql.query("queryEndpoints").params({
+        serviceId,
+        duration: this.durationTime,
+        keyword: keyword || "",
+      });
+      if (res.data.errors) {
+        return res.data;
+      }
+      this.taskEndpoints = [{ value: "", label: "All" }, ...res.data.data.pods];
       return res.data;
     },
     async getTaskList() {

src/store/modules/trace.ts

@@ -95,10 +95,7 @@ export const traceStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.instances = [
-        { value: "0", label: "All" },
-        ...res.data.data.pods,
-      ] || [{ value: " 0", label: "All" }];
+      this.instances = [{ value: "0", label: "All" }, ...res.data.data.pods];
       return res.data;
     },
     async getEndpoints(id: string, keyword?: string) {
@@ -113,10 +110,7 @@ export const traceStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.endpoints = [
-        { value: "0", label: "All" },
-        ...res.data.data.pods,
-      ] || [{ value: "0", label: "All" }];
+      this.endpoints = [{ value: "0", label: "All" }, ...res.data.data.pods];
       return res.data;
     },
     async getTraces() {