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

feat: update

Browse Source
This commit is contained in:
Fine 2023-03-22 12:31:14 +08:00
parent eeda0254f3
commit 90d2edd3c4
2 changed files with 32 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/views/dashboard/related/topology/components/Graph.vue
View File

@ -32,26 +32,25 @@ limitations under the License. -->
@mousedown="startMoveNode($event, n)" @mousedown="startMoveNode($event, n)"
@mouseup="stopMoveNode($event)" @mouseup="stopMoveNode($event)"
> >
<image width="49" height="49" :x="n.x - 20" :y="n.y - 24" :href="getNodeStatus(n)" /> <image width="36" height="36" :x="n.x - 15" :y="n.y - 18" :href="getNodeStatus(n)" />
<image width="32" height="32" :x="n.x - 15" :y="n.y - 50" :href="icons.LOCAL" style="opacity: 0.6" /> <!-- <circle :cx="n.x" :cy="n.y" r="12" fill="none" stroke="red"/> -->
<image width="28" height="25" :x="n.x - 14" :y="n.y - 43" :href="icons.LOCAL" style="opacity: 0.5" />
<image <image
width="18" width="12"
height="18" height="12"
:x="n.x - 8" :x="n.x - 6"
:y="n.y - 45" :y="n.y - 38"
:href="!n.type || n.type === `N/A` ? icons.UNDEFINED : icons[n.type.toUpperCase().replace('-', '')]" :href="!n.type || n.type === `N/A` ? icons.UNDEFINED : icons[n.type.toUpperCase().replace('-', '')]"
/> />
<text :x="n.x - (n.name.length * 6) / 2" :y="n.y + n.height + 12" style="pointer-events: none"> <text :x="n.x - (n.name.length * 6) / 2 + 6" :y="n.y + n.height + 8" style="pointer-events: none">
{{ n.name.length > 20 ? `${n.name.substring(0, 20)}...` : n.name }} {{ n.name.length > 20 ? `${n.name.substring(0, 20)}...` : n.name }}
</text> </text>
</g> </g>
<g v-for="(l, index) in topologyLayout.calls" :key="index"> <g v-for="(l, index) in topologyLayout.calls" :key="index">
<path <path
class="topo-line" class="topo-line"
:d="`M${l.sourceX} ${l.sourceY} :d="`M${l.sourceX} ${l.sourceY} L${l.targetX} ${l.targetY}`"
L${l.targetX} ${l.targetY}`" stroke="#97B0F8"
stroke="#aaa"
stroke-width="1"
marker-end="url(#arrow)" marker-end="url(#arrow)"
/> />
<circle <circle
@ -59,7 +58,7 @@ limitations under the License. -->
:cx="(l.sourceX + l.targetX) / 2" :cx="(l.sourceX + l.targetX) / 2"
:cy="(l.sourceY + l.targetY) / 2" :cy="(l.sourceY + l.targetY) / 2"
r="4" r="4"
fill="#bbb" fill="#97B0F8"
@click="handleLinkClick($event, l)" @click="handleLinkClick($event, l)"
@mouseover="showLinkTip($event, l)" @mouseover="showLinkTip($event, l)"
@mouseout="hideTip" @mouseout="hideTip"
@ -77,22 +76,22 @@ limitations under the License. -->
refY="6" refY="6"
orient="auto" orient="auto"
> >
<path d="M2,2 L10,6 L2,10 L6,6 L2,2" fill="#999" /> <path d="M2,2 L10,6 L2,10 L6,6 L2,2" fill="#97B0F8" />
</marker> </marker>
</defs> </defs>
</g> </g>
</g> </g>
<circle class="node" r="10" stroke-width="4" stroke="#ed374d" :cx="34" :cy="65" fill="none" />
<circle class="node" r="10" stroke-width="4" stroke="#72c59f" fill="none" :cx="35" :cy="25" />
</svg> </svg>
<div id="tooltip"></div> <div id="tooltip"></div>
<div class="legend"> <div class="legend">
<div> <div>
<img :src="icons.CUBE" />
<span> <span>
{{ settings.description ? settings.description.healthy || "" : "" }} {{ settings.description ? settings.description.healthy || "" : "" }}
</span> </span>
</div> </div>
<div> <div>
<img :src="icons.CUBEERROR" />
<span> <span>
{{ settings.description ? settings.description.unhealthy || "" : "" }} {{ settings.description ? settings.description.unhealthy || "" : "" }}
</span> </span>
@ -179,7 +178,8 @@ limitations under the License. -->
const tooltip = ref<Nullable<any>>(null); const tooltip = ref<Nullable<any>>(null);
const graphWidth = ref<number>(100); const graphWidth = ref<number>(100);
const currentNode = ref<Nullable<Node>>(); const currentNode = ref<Nullable<Node>>();
const diff = computed(() => [(width.value - graphWidth.value - 100) / 2, 100]); const diff = computed(() => [(width.value - graphWidth.value - 130) / 2, 100]);
const radius = 8;
onMounted(async () => { onMounted(async () => {
await nextTick(); await nextTick();
@ -261,7 +261,7 @@ limitations under the License. -->
levels.push(a); levels.push(a);
} }
} }
topologyLayout.value = layout(levels, topologyStore.calls); topologyLayout.value = layout(levels, topologyStore.calls, radius);
graphWidth.value = topologyLayout.value.layout.width; graphWidth.value = topologyLayout.value.layout.width;
const drag: any = d3.drag().on("drag", (d: { x: number; y: number }) => { const drag: any = d3.drag().on("drag", (d: { x: number; y: number }) => {
moveNode(d); moveNode(d);
@ -294,10 +294,10 @@ limitations under the License. -->
const pos: any = circleIntersection( const pos: any = circleIntersection(
call.sourceObj.x, call.sourceObj.x,
call.sourceObj.y, call.sourceObj.y,
18, radius,
call.targetObj.x, call.targetObj.x,
call.targetObj.y, call.targetObj.y,
18, radius,
); );
call.sourceX = pos[0].x; call.sourceX = pos[0].x;
call.sourceY = pos[0].y; call.sourceY = pos[0].y;
@ -305,7 +305,7 @@ limitations under the License. -->
call.targetY = pos[1].y; call.targetY = pos[1].y;
} }
} }
topologyLayout.value.calls = computeCallPos(topologyLayout.value.calls); topologyLayout.value.calls = computeCallPos(topologyLayout.value.calls, radius);
} }
function startMoveNode(event: MouseEvent, d: Node) { function startMoveNode(event: MouseEvent, d: Node) {
@ -623,7 +623,7 @@ limitations under the License. -->
.legend { .legend {
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 50px; left: 25px;
color: #666; color: #666;
div { div {

15
src/views/dashboard/related/topology/components/utils/layout.ts
View File

@ -17,7 +17,7 @@
import * as d3 from "d3"; import * as d3 from "d3";
import type { Node } from "@/types/topology"; import type { Node } from "@/types/topology";
export function layout(levels: Node[][], calls: any[]) { export function layout(levels: Node[][], calls: any[], radius: number) {
// precompute level depth // precompute level depth
levels.forEach((l: any, i: any) => l.forEach((n: any) => (n.level = i))); levels.forEach((l: any, i: any) => l.forEach((n: any) => (n.level = i)));
@ -57,10 +57,10 @@ export function layout(levels: Node[][], calls: any[]) {
height: d3.max(nodes, (n: { y: number }) => n.y) || 0 + node_height / 2 + 2 * padding, height: d3.max(nodes, (n: { y: number }) => n.y) || 0 + node_height / 2 + 2 * padding,
}; };
return { nodes, layout, calls: computeCallPos(calls) }; return { nodes, layout, calls: computeCallPos(calls, radius) };
} }
export function computeCallPos(calls: any[]) { export function computeCallPos(calls: any[], radius: number) {
for (const [index, call] of calls.entries()) { for (const [index, call] of calls.entries()) {
const centrePoints = [call.sourceObj.x, call.sourceObj.y, call.targetObj.x, call.targetObj.y]; const centrePoints = [call.sourceObj.x, call.sourceObj.y, call.targetObj.x, call.targetObj.y];
for (const [idx, link] of calls.entries()) { for (const [idx, link] of calls.entries()) {
@ -86,7 +86,14 @@ export function computeCallPos(calls: any[]) {
} }
} }
} }
const pos: any = circleIntersection(centrePoints[0], centrePoints[1], 18, centrePoints[2], centrePoints[3], 18); const pos: any = circleIntersection(
centrePoints[0],
centrePoints[1],
radius,
centrePoints[2],
centrePoints[3],
radius,
);
call.sourceX = pos[0].x; call.sourceX = pos[0].x;
call.sourceY = pos[0].y; call.sourceY = pos[0].y;
call.targetX = pos[1].x; call.targetX = pos[1].x;