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

refactor

Browse Source
This commit is contained in:
Fine 2022-08-19 16:35:40 +08:00
parent 5053820860
commit 1ad7cabcd4
2 changed files with 33 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/store/modules/dashboard.ts
View File

@ -113,12 +113,18 @@ export const dashboardStore = defineStore({
: 3,
};
}
if (["Trace", "Profile", "Log", "DemandLog", "Ebpf"].includes(type)) {
if (
[
"Trace",
"Profile",
"Log",
"DemandLog",
"Ebpf",
"NetworkProfiling",
].includes(type)
) {
newItem.h = 36;
}
if (["NetworkProfiling"].includes(type)) {
newItem.h = 44;
}
if (type === "Text") {
newItem.h = 6;
newItem.graph = TextConfig;
@ -178,12 +184,18 @@ export const dashboardStore = defineStore({
showDepth: true,
};
}
if (["Trace", "Profile", "Log", "DemandLog", "Ebpf"].includes(type)) {
if (
[
"Trace",
"Profile",
"Log",
"DemandLog",
"Ebpf",
"NetworkProfiling",
].includes(type)
) {
newItem.h = 32;
}
if (["NetworkProfiling"].includes(type)) {
newItem.h = 44;
}
if (type === "Text") {
newItem.h = 6;
newItem.graph = TextConfig;

16
src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
View File

@ -72,6 +72,8 @@ const arrow = ref<any>(null);
const oldVal = ref<{ width: number; height: number }>({ width: 0, height: 0 });
const showSettings = ref<boolean>(false);
const config = ref<any>({});
const diff = ref<number[]>([220, 200]);
const radius = 210;
onMounted(() => {
init();
@ -99,16 +101,24 @@ function drawGraph() {
width.value = dom.width;
svg.value.attr("height", height.value).attr("width", width.value);
tip.value = (d3tip as any)().attr("class", "d3-tip").offset([-8, 0]);
const outNodes = networkProfilingStore.nodes.filter(
(d: ProcessNode) => d.serviceInstanceId !== selectorStore.currentPod.id
);
if (!outNodes.length) {
diff.value[0] = (dom.width - radius * 2) / 2 + radius;
} else {
diff.value[0] = (dom.width - radius * 4) / 2 + radius;
}
graph.value = svg.value
.append("g")
.attr("class", "svg-graph")
.attr("transform", `translate(220, 200)`);
.attr("transform", `translate(${diff.value[0]}, ${diff.value[1]})`);
graph.value.call(tip.value);
node.value = graph.value.append("g").selectAll(".topo-node");
link.value = graph.value.append("g").selectAll(".topo-call");
anchor.value = graph.value.append("g").selectAll(".topo-line-anchor");
arrow.value = graph.value.append("g").selectAll(".topo-line-arrow");
svg.value.call(zoom(d3, graph.value, [220, 200]));
svg.value.call(zoom(d3, graph.value, diff.value));
svg.value.on("click", (event: any) => {
event.stopPropagation();
event.preventDefault();
@ -167,7 +177,7 @@ function createLayout() {
}
const p = {
count: 1,
radius: 210, // layout hexagons radius 300
radius, // layout hexagons radius 300
};
const polygon = createPolygon(p.radius, 6, 0);
const origin = [0, 0];