diff --git a/src/types/ebpf.d.ts b/src/types/ebpf.d.ts
index 5dfca0ef..e9986ef1 100644
--- a/src/types/ebpf.d.ts
+++ b/src/types/ebpf.d.ts
@@ -74,4 +74,6 @@ export type ProcessNode = {
serviceInstanceName: string;
name: string;
isReal: boolean;
+ x?: number;
+ y?: number;
};
diff --git a/src/views/dashboard/related/components/utils/zoom.ts b/src/views/dashboard/related/components/utils/zoom.ts
index 9227089c..6ba31c04 100644
--- a/src/views/dashboard/related/components/utils/zoom.ts
+++ b/src/views/dashboard/related/components/utils/zoom.ts
@@ -19,11 +19,11 @@ export default (d3: any, graph: any, diff: number[]) =>
d3
.zoom()
.scaleExtent([0.3, 10])
- .on("zoom", (event: any) => {
+ .on("zoom", (d: any) => {
graph.attr(
"transform",
- `translate(${event.transform.x + diff[0]},${
- event.transform.y + diff[1]
- })scale(${event.transform.k})`
+ `translate(${d.transform.x + diff[0]},${
+ d.transform.y + diff[1]
+ })scale(${d.transform.k})`
);
});
diff --git a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
index 430f391b..f56140a2 100644
--- a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
+++ b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
@@ -39,16 +39,24 @@ limitations under the License. -->
class="topo-node"
@mouseover="showNodeTip(node, $event)"
@mouseout="hideNodeTip"
+ @mousemove="moveNode(node, $event)"
+ @mousedown="startMoveNode($event)"
+ @mouseup="stopMoveNode($event)"
>
-
+
{{
node.name.length > 10
? `${node.name.substring(0, 10)}...`
@@ -100,7 +108,7 @@ limitations under the License. -->
- test tooltip
+
@@ -158,7 +166,8 @@ const config = ref(props.config || {});
const diff = ref([220, 200]);
const radius = 210;
const dates = ref>(null);
-const nodeList = ref([]);
+const nodeList = ref([]);
+const isMoving = ref(false);
onMounted(() => {
init();
@@ -424,13 +433,33 @@ function resize() {
}
async function freshNodes() {
- // d3.select(".svg-graph").remove();
if (!networkProfilingStore.nodes.length) {
return;
}
drawGraph();
createLayout();
}
+function startMoveNode(event: MouseEvent) {
+ event.stopPropagation();
+ isMoving.value = true;
+}
+function stopMoveNode(event: MouseEvent) {
+ event.stopPropagation();
+ isMoving.value = false;
+}
+function moveNode(d: ProcessNode, event: MouseEvent) {
+ event.stopPropagation();
+ if (!isMoving.value) {
+ return;
+ }
+ nodeList.value = nodeList.value.map((node: ProcessNode) => {
+ if (node.id === d.id) {
+ node.x = event.offsetX - diff.value[0];
+ node.y = event.offsetY - diff.value[1];
+ }
+ return node;
+ });
+}
function showNodeTip(d: ProcessNode, event: MouseEvent) {
const tipHtml = ` name: ${d.name}
`;
@@ -549,7 +578,7 @@ watch(
visibility: hidden;
padding: 5px;
border: 1px solid #000;
- border-radius: 5px;
+ border-radius: 3px;
background-color: #fff;
}