github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-07 02:22:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

update trace table

Browse Source
This commit is contained in:
Fine 2025-04-14 17:47:15 +08:00
parent 86eee044be
commit 7a47ba9d69
4 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/types/trace.d.ts vendored
View File

@ -48,6 +48,7 @@ export interface Span {
logs?: log[];
parentSegmentId?: string;
refs?: Ref[];
key?: string;
}
export type Ref = {
type?: string;

18
src/views/dashboard/related/trace/components/D3Graph/Index.vue
View File

@ -60,8 +60,9 @@ limitations under the License. -->
import { debounce } from "@/utils/debounce";
import { mutationObserver } from "@/utils/mutation";
import { TraceGraphType } from "../constant";
import { Themes } from "@/constants/data";
/* global defineProps, Nullable, defineExpose, Recordable */
/* global Recordable, Nullable */
const props = defineProps({
data: { type: Array as PropType<Span[]>, default: () => [] },
traceId: { type: String, default: "" },
@ -82,9 +83,6 @@ limitations under the License. -->
const debounceFunc = debounce(draw, 500);
const visDate = (date: number, pattern = "YYYY-MM-DD HH:mm:ss:SSS") => dayjs(date).format(pattern);
defineExpose({
tree,
});
onMounted(() => {
loading.value = true;
changeTree();
@ -163,10 +161,21 @@ limitations under the License. -->
}
function viewParentSpan(span: Recordable) {
if (props.type === TraceGraphType.TABLE) {
setTableSpanStyle(span);
return;
}
tree.value.highlightParents(span);
}
function setTableSpanStyle(span: Recordable) {
const itemDom: any = document.querySelector(`.trace-item-${span.key}`);
const items: any = document.querySelectorAll(".trace-item");
for (const item of items) {
item.style.background = appStore.theme === Themes.Dark ? "#212224" : "#fff";
}
itemDom.style.background = appStore.theme === Themes.Dark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)";
const box: any = document.querySelector("#trace-action-box");
box.style.display = "none";
}
function traverseTree(node: Recordable, spanId: string, segmentId: string, data: Recordable) {
if (!node || node.isBroken) {
return;
@ -308,6 +317,7 @@ limitations under the License. -->
}
for (const i of [...fixSpans, ...props.data]) {
i.label = i.endpointName || "no operation name";
i.key = Math.random().toString(36).substring(2, 36);
i.children = [];
if (segmentGroup[i.segmentId]) {
segmentGroup[i.segmentId].push(i);

1
src/views/dashboard/related/trace/components/Table.vue
View File

@ -21,7 +21,6 @@ limitations under the License. -->
import Graph from "./D3Graph/Index.vue";
import { TraceGraphType } from "./constant";
/* global defineProps, Recordable*/
defineProps({
data: { type: Array as PropType<Span[]>, default: () => [] },
traceId: { type: String, default: "" },

1
src/views/dashboard/related/trace/components/Table/TableItem.vue
View File

@ -55,6 +55,7 @@ limitations under the License. -->
'level' + (data.level - 1),
{ 'trace-item-error': data.isError },
{ profiled: data.profiled === false },
`trace-item-${data.key}`,
]"
:data-text="data.profiled === false ? 'No Thread Dump' : ''"
>