feat: create markers on process topology calls (#146)

src/graphql/fragments/topology.ts

@@ -94,6 +94,8 @@ export const ProcessTopology = {
       source
       detectPoints
       target
+      sourceComponents
+      targetComponents
     }
   }
 `,

src/types/topology.d.ts

@@ -23,6 +23,9 @@ export interface Call {
   sourceObj?: any;
   targetObj?: any;
   value?: number;
+  lowerArc?: boolean;
+  sourceComponents: string[];
+  targetComponents: string[];
 }
 export interface Node {
   id: string;

src/views/dashboard/related/network-profiling/components/Graph/linkProcess.ts

@@ -14,6 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import icons from "@/assets/img/icons";
+import { Call } from "@/types/topology";
 
 export const linkElement = (graph: any) => {
   const linkEnter = graph
@@ -21,10 +23,10 @@ export const linkElement = (graph: any) => {
     .attr("class", "topo-call")
     .attr("marker-end", "url(#arrow)")
     .attr("stroke", "#97B0F8")
-    .attr("d", (d: any) => {
+    .attr("d", (d: Call) => {
       const controlPos = computeControlPoint(
-        [d.source.x, d.source.y - 5],
+        [d.source.x, d.source.y],
-        [d.target.x, d.target.y - 5],
+        [d.target.x, d.target.y],
         0.5
       );
       if (d.lowerArc) {
@@ -34,7 +36,7 @@ export const linkElement = (graph: any) => {
         "M" +
         d.source.x +
         " " +
-        (d.source.y - 5) +
+        d.source.y +
         " " +
         "Q" +
         controlPos[0] +
@@ -43,34 +45,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")
+    .append("g")
-    .attr("class", "topo-line-anchor")
+    .attr("style", "cursor: move;")
-    .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]})`;
-    })
     .on("mouseover", function (event: unknown, d: unknown) {
       tip.html(funcs.tipHtml).show(d, this);
     })
@@ -80,6 +63,54 @@ 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;
+    })
+    .attr("y", (d: Call) => {
+      const p = getMidpoint(d);
+      return p[1] - 9;
+    })
+    .attr("xlink:href", (d: Call) => {
+      const types = [...d.sourceComponents, ...d.targetComponents];
+      if (types.includes("tcp") || types.includes("http")) {
+        return icons.HTTPDARK;
+      }
+      if (types.includes("https") || types.includes("tls")) {
+        return icons.HTTPS;
+      }
+    });
   return linkEnter;
 };
 export const arrowMarker = (graph: any) => {
@@ -130,3 +161,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: Call) {
+  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;
+}

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

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;