update style

src/store/modules/ebpf.ts

@@ -38,6 +38,7 @@ interface EbpfStore {
   highlightTop: boolean;
   labels: Option[];
   couldProfiling: boolean;
+  tip: string;
 }
 
 export const ebpfStore = defineStore({
@@ -51,6 +52,7 @@ export const ebpfStore = defineStore({
     highlightTop: true,
     labels: [{ value: "", label: "" }],
     couldProfiling: false,
+    tip: "",
   }),
   actions: {
     setCurrentSpan(span: Span) {
@@ -136,6 +138,7 @@ export const ebpfStore = defineStore({
         return res.data;
       }
       const { analysisEBPFResult } = res.data.data;
+      this.tip = analysisEBPFResult.tip;
       if (!analysisEBPFResult) {
         this.analyzeTrees = [];
         return res.data;

src/types/ebpf.d.ts

@@ -66,4 +66,5 @@ export type StackElement = {
   stackType: string;
   value: number;
   children?: StackElement[];
+  instanceName: string;
 };

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

@@ -16,8 +16,10 @@ limitations under the License. -->
   <div class="flex-h content">
     <TaskList />
     <div class="vis-graph ml-5">
+      <div class="item">
         <EBPFSchedules />
-      <div class="stack">
+      </div>
+      <div class="item">
         <EBPFStack />
       </div>
     </div>
@@ -39,8 +41,9 @@ import EBPFStack from "./components/EBPFStack.vue";
   width: calc(100% - 300px);
 }
 
-.stack {
+.item {
   width: 100%;
   overflow: auto;
+  height: 50%;
 }
 </style>

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

@@ -157,9 +157,6 @@ async function analyzeEBPF() {
     ElMessage.error(res.data.errors);
     return;
   }
-  if (res.data.analysisEBPFResult.tip) {
-    ElMessage.error(res.data.analysisEBPFResult.tip);
-  }
 }
 
 function visTimeline() {
@@ -183,15 +180,16 @@ function visTimeline() {
     }
   );
   searchProcesses();
-  const items: any = new DataSet(schedules);
-  const options = {
-    height: 250,
-    width: "100%",
-    locale: "en",
-  };
   if (!timeline.value) {
     return;
   }
+  const h = timeline.value.getBoundingClientRect().height;
+  const items: any = new DataSet(schedules);
+  const options = {
+    height: h,
+    width: "100%",
+    locale: "en",
+  };
   visGraph.value = new Timeline(timeline.value, items, options);
 }
 
@@ -200,8 +198,10 @@ function changePage(pageIndex: number) {
 }
 
 function searchProcesses(pageIndex?: any) {
-  const arr = processes.value.filter((d: { name: string }) =>
+  const arr = processes.value.filter(
-    d.name.includes(searchText.value)
+    (d: { name: string; instanceName: string }) =>
+      d.name.includes(searchText.value) ||
+      d.instanceName.includes(searchText.value)
   );
   currentProcesses.value = arr.splice(
     (pageIndex - 1 || 0) * pageSize,
@@ -222,8 +222,9 @@ watch(
 }
 
 .schedules {
-  width: 100%;
+  width: calc(100% - 5px);
   margin: 0 5px 5px 0;
+  height: calc(100% - 60px);
 }
 
 .inputs {

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

@@ -13,7 +13,9 @@ 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 id="graph-stack" ref="graph"></div>
+  <div id="graph-stack" ref="graph">
+    <span class="tip" v-show="ebpfStore.tip">{{ ebpfStore.tip }}</span>
+  </div>
 </template>
 <script lang="ts" setup>
 import { ref, watch } from "vue";
@@ -132,7 +134,15 @@ watch(
 <style>
 #graph-stack {
   width: 100%;
-  height: 350px;
+  height: 100%;
   cursor: pointer;
 }
+
+.tip {
+  display: inline-block;
+  width: 100%;
+  text-align: center;
+  color: red;
+  margin-top: 20px;
+}
 </style>