diff --git a/src/store/modules/ebpf.ts b/src/store/modules/ebpf.ts index ca13914d..2135cd56 100644 --- a/src/store/modules/ebpf.ts +++ b/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; diff --git a/src/types/ebpf.d.ts b/src/types/ebpf.d.ts index f86b1ee4..0ec01212 100644 --- a/src/types/ebpf.d.ts +++ b/src/types/ebpf.d.ts @@ -66,4 +66,5 @@ export type StackElement = { stackType: string; value: number; children?: StackElement[]; + instanceName: string; }; diff --git a/src/views/dashboard/related/ebpf/Content.vue b/src/views/dashboard/related/ebpf/Content.vue index cd36cad2..009f442b 100644 --- a/src/views/dashboard/related/ebpf/Content.vue +++ b/src/views/dashboard/related/ebpf/Content.vue @@ -16,8 +16,10 @@ limitations under the License. -->
- -
+
+ +
+
@@ -39,8 +41,9 @@ import EBPFStack from "./components/EBPFStack.vue"; width: calc(100% - 300px); } -.stack { +.item { width: 100%; overflow: auto; + height: 50%; } diff --git a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue index b3421b34..3c962ded 100644 --- a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue +++ b/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 }) => - d.name.includes(searchText.value) + const arr = processes.value.filter( + (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 { diff --git a/src/views/dashboard/related/ebpf/components/EBPFStack.vue b/src/views/dashboard/related/ebpf/components/EBPFStack.vue index 2e4ba833..45112e29 100644 --- a/src/views/dashboard/related/ebpf/components/EBPFStack.vue +++ b/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. -->