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,74 +13,86 @@ 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">
-    <Selector
+    <div class="mb-10">
-      :value="selectedLabels"
+      <Selector
-      :options="labels"
+        :value="selectedLabels"
-      size="small"
+        :options="labels"
-      placeholder="Please select labels"
-      @change="changeLabels"
-      class="inputs mr-10"
-      :multiple="true"
-    />
-    <el-button type="primary" size="small">
-      <span>{{ duration[0] }}</span>
-      <span> ~ </span>
-      <span>{{ duration[1] }}</span>
-    </el-button>
-    <el-popover placement="bottom" :width="680" trigger="click">
-      <template #reference>
-        <el-button type="primary" size="small">
-          {{ t("processSelect") }}
-        </el-button>
-      </template>
-      <el-input
-        v-model="searchText"
-        placeholder="Please input name"
-        class="input-with-search"
         size="small"
-        @change="searchProcesses(0)"
+        placeholder="Please select labels"
-      >
+        @change="changeLabels"
-        <template #append>
+        class="inputs mr-10"
-          <el-button size="small">
+        :multiple="true"
-            <Icon size="sm" iconName="search" />
+      />
+    </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>
+        <span>{{ duration[1] }}</span>
+      </el-button>
+      <el-popover placement="bottom" :width="680" trigger="click">
+        <template #reference>
+          <el-button type="primary" size="small">
+            {{ t("processSelect") }}
           </el-button>
         </template>
-      </el-input>
+        <el-input
-      <el-table
+          v-model="searchText"
-        :data="currentProcesses"
+          placeholder="Please input name"
-        ref="multipleTableRef"
+          class="input-with-search"
-        @selection-change="handleSelectionChange"
+          size="small"
-      >
+          @change="searchProcesses(0)"
-        <el-table-column type="selection" width="55" />
+        >
-        <el-table-column
+          <template #append>
-          v-for="(h, index) of TableHeader"
+            <el-button size="small">
-          :property="h.property"
+              <Icon size="sm" iconName="search" />
-          :label="h.label"
+            </el-button>
-          :key="index"
-          width="150"
-        />
-        <el-table-column width="300" label="Attributes">
-          <template #default="scope">
-            {{ scope.row.attributes.map((d: {name: string, value: string}) => `${d.name}=${d.value}`).join("; ") }}
           </template>
-        </el-table-column>
+        </el-input>
-      </el-table>
+        <el-table
-      <el-pagination
+          :data="currentProcesses"
-        class="pagination"
+          ref="multipleTableRef"
-        background
+          @selection-change="handleSelectionChange"
-        small
+        >
-        layout="prev, pager, next"
+          <el-table-column type="selection" width="55" />
-        :page-size="pageSize"
+          <el-table-column
-        :total="processes.length"
+            v-for="(h, index) of TableHeader"
-        @current-change="changePage"
+            :property="h.property"
-        @prev-click="changePage"
+            :label="h.label"
-        @next-click="changePage"
+            :key="index"
-      />
+            width="150"
-    </el-popover>
+          />
-    <el-button type="primary" size="small" @click="analyzeEBPF">
+          <el-table-column width="300" label="Attributes">
-      {{ t("analyze") }}
+            <template #default="scope">
-    </el-button>
+              {{ scope.row.attributes.map((d: {name: string, value: string}) => `${d.name}=${d.value}`).join("; ") }}
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          class="pagination"
+          background
+          small
+          layout="prev, pager, next"
+          :page-size="pageSize"
+          :total="processes.length"
+          @current-change="changePage"
+          @prev-click="changePage"
+          @next-click="changePage"
+        />
+      </el-popover>
+      <el-button type="primary" size="small" @click="analyzeEBPF">
+        {{ t("analyze") }}
+      </el-button>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -88,7 +100,7 @@ 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: [