From 138fa1f38d525d547f220eff767665e7a9006f16 Mon Sep 17 00:00:00 2001 From: zhouzixin Date: Sun, 4 Aug 2024 00:04:22 +0800 Subject: [PATCH] fix: display errors and ready to CR --- src/types/ebpf.d.ts | 2 ++ src/utils/flameGraph.ts | 24 +++++++++++++++++++ .../related/ebpf/components/EBPFStack.vue | 9 +------ .../dashboard/related/profile/Content.vue | 23 +++++++----------- .../related/profile/components/SpanTree.vue | 4 ++-- .../related/profile/components/data.ts | 8 +++---- 6 files changed, 41 insertions(+), 29 deletions(-) create mode 100644 src/utils/flameGraph.ts diff --git a/src/types/ebpf.d.ts b/src/types/ebpf.d.ts index ae87d923..53badf56 100644 --- a/src/types/ebpf.d.ts +++ b/src/types/ebpf.d.ts @@ -89,6 +89,8 @@ export type TraceProfilingElement = { children?: TraceProfilingElement[]; rateOfRoot?: string; rateOfParent: string; + duration: number; + durationChildExcluded: number; }; export type AnalyzationTrees = { id: string; diff --git a/src/utils/flameGraph.ts b/src/utils/flameGraph.ts new file mode 100644 index 00000000..98e4d192 --- /dev/null +++ b/src/utils/flameGraph.ts @@ -0,0 +1,24 @@ +/** + * 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. + */ + +export function treeForeach(tree: any, func: (node: any) => void) { + for (const data of tree) { + data.children && treeForeach(data.children, func); + func(data); + } + return tree; +} diff --git a/src/views/dashboard/related/ebpf/components/EBPFStack.vue b/src/views/dashboard/related/ebpf/components/EBPFStack.vue index 988f2193..190d732d 100644 --- a/src/views/dashboard/related/ebpf/components/EBPFStack.vue +++ b/src/views/dashboard/related/ebpf/components/EBPFStack.vue @@ -28,6 +28,7 @@ limitations under the License. --> import type { StackElement } from "@/types/ebpf"; import { AggregateTypes } from "./data"; import "d3-flame-graph/dist/d3-flamegraph.css"; + import { treeForeach } from "@/utils/flameGraph"; /*global Nullable, defineProps*/ const props = defineProps({ @@ -180,14 +181,6 @@ limitations under the License. --> return res; } - function treeForeach(tree: StackElement[], func: (node: StackElement) => void) { - for (const data of tree) { - data.children && treeForeach(data.children, func); - func(data); - } - return tree; - } - watch( () => ebpfStore.analyzeTrees, () => { diff --git a/src/views/dashboard/related/profile/Content.vue b/src/views/dashboard/related/profile/Content.vue index 74c8540d..2adcfc94 100644 --- a/src/views/dashboard/related/profile/Content.vue +++ b/src/views/dashboard/related/profile/Content.vue @@ -21,7 +21,7 @@ limitations under the License. -->
-
+
import { flamegraph } from "d3-flame-graph"; import * as d3 from "d3"; import d3tip from "d3-tip"; - import { AggregateTypes } from "@/views/dashboard/related/ebpf/components/data"; + import { treeForeach } from "@/utils/flameGraph"; const stackTree = ref>(null); const selectStack = ref>(null); const graph = ref>(null); @@ -84,6 +84,8 @@ limitations under the License. --> stackType: "", rateOfRoot: "", rateOfParent: "", + duration: 0, + durationChildExcluded: 0, }; countRange(); for (const tree of profileStore.analyzeTrees) { @@ -122,10 +124,9 @@ limitations under the License. --> .direction("s") .html((d: { data: TraceProfilingElement } & { parent: { data: TraceProfilingElement } }) => { const name = d.data.name.replace("<", "<").replace(">", ">"); - const valStr = - profileStore.aggregateType === AggregateTypes[0].value - ? `
Dump Count: ${d.data.count}
` - : `
Duration: ${d.data.count} ns
`; + const dumpCount = `
Dump Count: ${d.data.count}
`; + const duration = `
Duration: ${d.data.duration} ns
`; + const durationChildExcluded = `
DurationChildExcluded: ${d.data.durationChildExcluded} ns
`; const rateOfParent = (d.parent && `
Percentage Of Selected: ${ @@ -135,7 +136,7 @@ limitations under the License. --> const rateOfRoot = `
Percentage Of Root: ${ ((d.data.count / root.count) * 100).toFixed(3) + "%" }
`; - return `
CodeSignature: ${name}
${valStr}${rateOfParent}${rateOfRoot}`; + return `
CodeSignature: ${name}
${dumpCount}${duration}${durationChildExcluded}${rateOfParent}${rateOfRoot}`; }) .style("max-width", "400px"); flameChart.value.tooltip(tip); @@ -198,14 +199,6 @@ limitations under the License. --> return res; } - function treeForeach(tree: TraceProfilingElement[], func: (node: TraceProfilingElement) => void) { - for (const data of tree) { - data.children && treeForeach(data.children, func); - func(data); - } - return tree; - } - watch( () => profileStore.analyzeTrees, () => { diff --git a/src/views/dashboard/related/profile/components/SpanTree.vue b/src/views/dashboard/related/profile/components/SpanTree.vue index 48ad4b8b..e69f86a6 100644 --- a/src/views/dashboard/related/profile/components/SpanTree.vue +++ b/src/views/dashboard/related/profile/components/SpanTree.vue @@ -21,7 +21,7 @@ limitations under the License. --> size="small" :value="dataMode" :options="ProfileDataMode" - placeholder="Select whether the data contains Children" + placeholder="Please select a profile data mode" @change="spanModeChange" class="mr-10" /> @@ -29,7 +29,7 @@ limitations under the License. --> size="small" :value="displayMode" :options="ProfileDisplayMode" - placeholder="Select how to display the profiling data" + placeholder="Please select a profile display mode" @change="selectDisplayMode" class="mr-10" /> diff --git a/src/views/dashboard/related/profile/components/data.ts b/src/views/dashboard/related/profile/components/data.ts index 16bd5e69..042de1c3 100644 --- a/src/views/dashboard/related/profile/components/data.ts +++ b/src/views/dashboard/related/profile/components/data.ts @@ -14,14 +14,14 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export const ProfileDataMode: any[] = [ +export const ProfileDataMode = [ { label: "Include Children", value: "include" }, { label: "Exclude Children", value: "exclude" }, -]; -export const ProfileDisplayMode: any[] = [ +] as const; +export const ProfileDisplayMode = [ { label: "Tree Graph", value: "tree" }, { label: "Flame Graph", value: "flame" }, -]; +] as const; export const NewTaskField = { service: { key: "", label: "None" }, monitorTime: { key: "0", label: "monitor now" },