From dd3604b7b13228ab4a3b994d1400e8462049c501 Mon Sep 17 00:00:00 2001 From: Fine Date: Thu, 25 Aug 2022 11:19:31 +0800 Subject: [PATCH] add marks for topology calls --- src/assets/img/technologies/HTTPDARK.png | Bin 0 -> 1668 bytes src/assets/img/technologies/HTTPS.png | Bin 0 -> 847 bytes src/graphql/fragments/topology.ts | 2 + .../components/Graph/linkProcess.ts | 104 +++++++++++++----- .../components/Graph/nodeProcess.ts | 2 +- .../components/ProcessTopology.vue | 4 - 6 files changed, 81 insertions(+), 31 deletions(-) create mode 100644 src/assets/img/technologies/HTTPDARK.png create mode 100644 src/assets/img/technologies/HTTPS.png diff --git a/src/assets/img/technologies/HTTPDARK.png b/src/assets/img/technologies/HTTPDARK.png new file mode 100644 index 0000000000000000000000000000000000000000..917a85ec31daa4921557de89944f38b03819f01e GIT binary patch literal 1668 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 { const linkEnter = graph .append("path") @@ -23,8 +23,8 @@ export const linkElement = (graph: any) => { .attr("stroke", "#97B0F8") .attr("d", (d: any) => { const controlPos = computeControlPoint( - [d.source.x, d.source.y - 5], - [d.target.x, d.target.y - 5], + [d.source.x, d.source.y], + [d.target.x, d.target.y], 0.5 ); if (d.lowerArc) { @@ -34,7 +34,7 @@ export const linkElement = (graph: any) => { "M" + d.source.x + " " + - (d.source.y - 5) + + d.source.y + " " + "Q" + controlPos[0] + @@ -43,34 +43,15 @@ export const linkElement = (graph: any) => { " " + d.target.x + " " + - (d.target.y - 5) + d.target.y ); }); return linkEnter; }; export const anchorElement = (graph: any, funcs: any, tip: any) => { const linkEnter = graph - .append("circle") - .attr("class", "topo-line-anchor") - .attr("r", 5) - .attr("fill", "#97B0F8") - .attr("transform", (d: any) => { - const controlPos = computeControlPoint( - [d.source.x, d.source.y - 5], - [d.target.x, d.target.y - 5], - 0.5 - ); - if (d.lowerArc) { - controlPos[1] = -controlPos[1]; - } - const p = quadraticBezier( - 0.5, - { x: d.source.x, y: d.source.y - 5 }, - { x: controlPos[0], y: controlPos[1] }, - { x: d.target.x, y: d.target.y - 5 } - ); - return `translate(${p[0]}, ${p[1]})`; - }) + .append("g") + .attr("style", "cursor: move;") .on("mouseover", function (event: unknown, d: unknown) { tip.html(funcs.tipHtml).show(d, this); }) @@ -80,6 +61,60 @@ 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: any) => { + const p = getMidpoint(d); + return p[0] + 2; + }) + .attr("y", (d: any) => { + const p = getMidpoint(d); + return p[1] + 5; + }) + .text((d: any) => { + 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: any) => { + const p = getMidpoint(d); + return p[0] - 6; + }) + .attr("y", (d: any) => { + const p = getMidpoint(d); + return p[1] - 16; + }) + .attr("xlink:href", (d: any) => { + const types = [...d.sourceComponents, ...d.targetComponents]; + if (types.includes("tcp")) { + return icons.HTTPDARK; + } + if (types.includes("https")) { + return icons.HTTPS; + } + if (types.includes("http")) { + return icons.HTTPDARK; + } + if (types.includes("tls")) { + return icons.HTTPS; + } + }); return linkEnter; }; export const arrowMarker = (graph: any) => { @@ -130,3 +165,20 @@ function quadraticBezier( const y = (1 - t) * (1 - t) * ps.y + 2 * t * (1 - t) * pc.y + t * t * pe.y; return [x, y]; } +function getMidpoint(d: any) { + const controlPos = computeControlPoint( + [d.source.x, d.source.y], + [d.target.x, d.target.y], + 0.5 + ); + if (d.lowerArc) { + controlPos[1] = -controlPos[1]; + } + const p = quadraticBezier( + 0.5, + { x: d.source.x, y: d.source.y }, + { x: controlPos[0], y: controlPos[1] }, + { x: d.target.x, y: d.target.y } + ); + return p; +} diff --git a/src/views/dashboard/related/network-profiling/components/Graph/nodeProcess.ts b/src/views/dashboard/related/network-profiling/components/Graph/nodeProcess.ts index 1185b4a9..23a033d4 100644 --- a/src/views/dashboard/related/network-profiling/components/Graph/nodeProcess.ts +++ b/src/views/dashboard/related/network-profiling/components/Graph/nodeProcess.ts @@ -45,7 +45,7 @@ export default (d3: any, graph: any, funcs: any, tip: any) => { .append("text") .attr("fill", "#000") .attr("text-anchor", "middle") - .attr("x", (d: any) => d.x + 5) + .attr("x", (d: any) => d.x) .attr("y", (d: any) => d.y + 28) .text((d: { name: string }) => d.name.length > 10 ? `${d.name.substring(0, 10)}...` : d.name diff --git a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue index 40a42b58..6a9b9518 100644 --- a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue +++ b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue @@ -458,10 +458,6 @@ watch( right: 50px; } -.topo-line-anchor { - cursor: pointer; -} - .topo-call { stroke-linecap: round; stroke-width: 2px;