add conditions

src/graphql/fragments/ebpf.ts

@@ -75,9 +75,9 @@ export const queryEBPFSchedules = {
 
 export const analysisEBPFResult = {
   variable:
-    "$scheduleIdList: [ID!]!, $timeRanges: [EBPFProfilingAnalyzeTimeRange!]!",
+    "$scheduleIdList: [ID!]!, $timeRanges: [EBPFProfilingAnalyzeTimeRange!]!, $aggregateType: EBPFProfilingAnalyzeAggregateType",
   query: `
-  analysisEBPFResult: analysisEBPFProfilingResult(scheduleIdList: $scheduleIdList, timeRanges: $timeRanges) {
+  analysisEBPFResult: analysisEBPFProfilingResult(scheduleIdList: $scheduleIdList, timeRanges: $timeRanges, aggregateType: $aggregateType) {
     tip
     trees {
       elements {

src/store/modules/ebpf.ts

@@ -55,6 +55,9 @@ export const ebpfStore = defineStore({
     setCurrentSchedule(s: Trace) {
       this.currentSchedule = s;
     },
+    setAnalyzeTrees(tree: AnalyzationTrees[]) {
+      this.analyzeTrees = tree;
+    },
     async getCreateTaskData(serviceId: string) {
       const res: AxiosResponse = await graphql
         .query("getCreateTaskData")
@@ -125,6 +128,7 @@ export const ebpfStore = defineStore({
     async getEBPFAnalyze(params: {
       scheduleIdList: string[];
       timeRanges: Array<{ start: number; end: number }>;
+      aggregateType: string;
     }) {
       if (!params.scheduleIdList.length) {
         return new Promise((resolve) => resolve({}));

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

@@ -46,11 +46,13 @@ import EBPFStack from "./components/EBPFStack.vue";
 .item {
   width: 100%;
   overflow: auto;
-  height: calc(100% - 70px);
+  height: calc(100% - 100px);
   padding-bottom: 10px;
 }
 
 .schedules {
-  height: 60px;
+  height: 90px;
+  border-bottom: 1px solid #ccc;
+  padding-right: 10px;
 }
 </style>

src/views/dashboard/related/ebpf/components/EBPFSchedules.vue

@@ -13,7 +13,8 @@ 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="filters flex-h">
+  <div class="filters">
+    <div class="mb-10">
       <Selector
         :value="selectedLabels"
         :options="labels"
@@ -23,6 +24,16 @@ limitations under the License. -->
         class="inputs mr-10"
         :multiple="true"
       />
+    </div>
+    <div class="flex-h">
+      <Selector
+        :value="aggregateType"
+        :options="AggregateTypes"
+        size="small"
+        placeholder="Please select a type"
+        @change="changeAggregateType"
+        class="selector mr-10"
+      />
       <el-button type="primary" size="small">
         <span>{{ duration[0] }}</span>
         <span> ~ </span>
@@ -82,13 +93,14 @@ limitations under the License. -->
         {{ t("analyze") }}
       </el-button>
     </div>
+  </div>
 </template>
 <script lang="ts" setup>
 import { ref, watch } from "vue";
 import dayjs from "dayjs";
 import { useI18n } from "vue-i18n";
 import { Option } from "@/types/app";
-import { TableHeader } from "./data";
+import { TableHeader, AggregateTypes } from "./data";
 import { useEbpfStore } from "@/store/modules/ebpf";
 import { EBPFProfilingSchedule, Process } from "@/types/ebpf";
 import { ElMessage, ElTable } from "element-plus";
@@ -103,6 +115,7 @@ const processes = ref<Process[]>([]);
 const currentProcesses = ref<Process[]>([]);
 const selectedLabels = ref<string[]>(["0"]);
 const searchText = ref<string>("");
+const aggregateType = ref<string>(AggregateTypes[0].value);
 const duration = ref<string[]>([]);
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
@@ -112,6 +125,11 @@ function changeLabels(opt: any[]) {
   selectedLabels.value = arr;
 }
 
+function changeAggregateType(opt: any[]) {
+  aggregateType.value = opt[0].value;
+  ebpfStore.setAnalyzeTrees([]);
+}
+
 const handleSelectionChange = (arr: Process[]) => {
   selectedProcesses.value = arr.map((d: Process) => d.id);
 };
@@ -152,6 +170,7 @@ async function analyzeEBPF() {
   const res = await ebpfStore.getEBPFAnalyze({
     scheduleIdList,
     timeRanges,
+    aggregateType: aggregateType.value,
   });
   if (res.data.errors) {
     ElMessage.error(res.data.errors);
@@ -235,7 +254,7 @@ watch(
 }
 
 .inputs {
-  width: 300px;
+  width: 350px;
 }
 
 .input-with-search {
@@ -246,4 +265,8 @@ watch(
 .pagination {
   margin-top: 10px;
 }
+
+.selector {
+  width: 120px;
+}
 </style>

src/views/dashboard/related/ebpf/components/data.ts

@@ -28,7 +28,15 @@ export const NewTaskField = {
   maxSamplingCount: { key: 5, label: "5" },
 };
 
-export const TargetTypes = [{ label: "ON_CPU", value: "ON_CPU" }];
+export const TargetTypes = [
+  { label: "ON_CPU", value: "ON_CPU" },
+  { label: "OFF_CPU", value: "OFF_CPU" },
+];
+
+export const AggregateTypes = [
+  { label: "Duration", value: "DURATION" },
+  { label: "Count", value: "COUNT" },
+];
 
 export const InitTaskField = {
   monitorTimeEn: [