diff --git a/src/assets/img/technologies/HTTPDARK.png b/src/assets/img/technologies/HTTPDARK.png index 917a85ec..71a12772 100644 Binary files a/src/assets/img/technologies/HTTPDARK.png and b/src/assets/img/technologies/HTTPDARK.png differ diff --git a/src/assets/img/technologies/HTTPS.png b/src/assets/img/technologies/HTTPS.png index 5a0cad4d..80757120 100644 Binary files a/src/assets/img/technologies/HTTPS.png and b/src/assets/img/technologies/HTTPS.png differ diff --git a/src/views/dashboard/related/network-profiling/components/Graph/linkProcess.ts b/src/views/dashboard/related/network-profiling/components/Graph/linkProcess.ts index df32310d..15a32aaa 100644 --- a/src/views/dashboard/related/network-profiling/components/Graph/linkProcess.ts +++ b/src/views/dashboard/related/network-profiling/components/Graph/linkProcess.ts @@ -25,18 +25,18 @@ export const linkElement = (graph: any) => { .attr("stroke", "#97B0F8") .attr("d", (d: Call) => { const controlPos = computeControlPoint( - [d.source.x, d.source.y], - [d.target.x, d.target.y], + [d.source.x, d.source.y - 5], + [d.target.x, d.target.y - 5], 0.5 ); if (d.lowerArc) { - controlPos[1] = -controlPos[1]; + controlPos[1] = -controlPos[1] - 10; } return ( "M" + d.source.x + " " + - d.source.y + + (d.source.y - 5) + " " + "Q" + controlPos[0] + @@ -45,7 +45,7 @@ export const linkElement = (graph: any) => { " " + d.target.x + " " + - d.target.y + (d.target.y - 5) ); }); return linkEnter; @@ -63,44 +63,17 @@ export const anchorElement = (graph: any, funcs: any, tip: any) => { .on("click", (event: unknown, d: unknown) => { funcs.handleLinkClick(event, d); }); - linkEnter - .append("text") - .attr("fill", "#444") - .attr("text-anchor", "middle") - .attr("x", (d: Call) => { - const p = getMidpoint(d); - return p[0] + 10; - }) - .attr("y", (d: Call) => { - const p = getMidpoint(d); - return p[1] + 3; - }) - .text((d: Call) => { - const types = [...d.sourceComponents, ...d.targetComponents]; - if (types.includes("tcp")) { - return "TCP"; - } - if (types.includes("https")) { - return "HTTPS"; - } - if (types.includes("http")) { - return "HTTP"; - } - if (types.includes("tls")) { - return "TLS"; - } - }); linkEnter .append("image") .attr("width", 15) .attr("height", 15) .attr("x", (d: Call) => { const p = getMidpoint(d); - return p[0] - 16; + return p[0] - 8; }) .attr("y", (d: Call) => { const p = getMidpoint(d); - return p[1] - 9; + return p[1] - 13; }) .attr("xlink:href", (d: Call) => { const types = [...d.sourceComponents, ...d.targetComponents]; diff --git a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue index 6a9b9518..971f8099 100644 --- a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue +++ b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue @@ -315,9 +315,21 @@ function drawTopology(nodeArr: any[]) { { handleLinkClick: handleLinkClick, tipHtml: (data: Call) => { + const types = [...data.sourceComponents, ...data.targetComponents]; + let l = "TCP"; + if (types.includes("https")) { + l = "HTTPS"; + } + if (types.includes("http")) { + l = "HTTP"; + } + if (types.includes("tls")) { + l = "TLS"; + } const html = `
${t( "detectPoint" - )}:${data.detectPoints.join(" | ")}
`; + )}: ${data.detectPoints.join(" | ")} +
Type: ${l}
`; return html; }, },