feat: add legend and metrics

src/styles/lib.scss

@@ -95,6 +95,10 @@
   background-color: #a7aebb;
 }
 
+.mb-5 {
+  margin-bottom: 5px;
+}
+
 .ml-5 {
   margin-left: 5px;
 }
@@ -129,11 +133,9 @@
 @keyframes loading {
   0% {
     transform: rotate(0deg);
-    transform: rotate(0deg);
   }
 
   to {
     transform: rotate(1turn);
-    transform: rotate(1turn);
   }
 }

src/views/dashboard/related/topology/Graph.vue

@@ -25,21 +25,13 @@ import { simulationInit, simulationSkip } from "./utils/simulation";
 import nodeElement from "./utils/nodeElement";
 import { linkElement, anchorElement, arrowMarker } from "./utils/linkElement";
 // import tool from "./utils/tool";
-// import topoLegend from "./utils/legend";
+import topoLegend from "./utils/legend";
 import { Node, Call } from "@/types/topology";
 import { useTopologyStore } from "@/store/modules/topology";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { EntityType } from "../../data";
 
-/*global defineProps, Nullable */
+/*global Nullable */
-// const props = defineProps({
-//   current: {
-//     type: Object as PropType<{ [key: string]: number[] }>,
-//     default: () => ({}),
-//   },
-//   nodes: { type: Array as PropType<Node[]>, default: () => [] },
-//   links: { type: Array as PropType<Call[]>, default: () => [] },
-// });
 const { t } = useI18n();
 const topologyStore = useTopologyStore();
 const dashboardStore = useDashboardStore();
@@ -55,6 +47,7 @@ const link = ref<any>(null);
 const anchor = ref<any>(null);
 const arrow = ref<any>(null);
 const tools = ref<any>(null);
+const legend = ref<any>(null);
 
 onMounted(async () => {
   await getTopology();
@@ -87,6 +80,13 @@ onMounted(async () => {
   //   { icon: "ENDPOINT", click: handleGoEndpointDependency },
   //   { icon: "" },
   // ]);
+  // legend
+  legend.value = graph.value.append("g").attr("class", "topo-legend");
+  topoLegend(legend.value, height.value, width.value);
+  svg.value.on("click", (event: any) => {
+    event.stopPropagation();
+    event.preventDefault();
+  });
 });
 async function getTopology() {
   switch (dashboardStore.entity) {
@@ -173,7 +173,8 @@ function update() {
       dragended: dragended,
       handleNodeClick: handleNodeClick,
     },
-    tip.value
+    tip.value,
+    t
   ).merge(node.value);
   // line element
   link.value = link.value.data(topologyStore.calls, (d: Call) => d.id);
@@ -196,7 +197,7 @@ function update() {
         }</div>
             <div><span class="grey">${t(
               "detectPoint"
-            )}:</span>${data.detectPoints.join(" | ")}</div>
+            )}: </span>${data.detectPoints.join(" | ")}</div>
           `,
     },
     tip.value

src/views/dashboard/related/topology/utils/nodeElement.ts

@@ -15,9 +15,17 @@
  * limitations under the License.
  */
 import icons from "./icons";
+import { Node } from "@/types/topology";
 
 icons["KAFKA-CONSUMER"] = icons.KAFKA;
-export default (d3: any, graph: any, tool: any, funcs: any, tip: any) => {
+export default (
+  d3: any,
+  graph: any,
+  tool: any,
+  funcs: any,
+  tip: any,
+  t: any
+) => {
   const nodeEnter = graph
     .append("g")
     .call(
@@ -27,10 +35,18 @@ export default (d3: any, graph: any, tool: any, funcs: any, tip: any) => {
         .on("drag", funcs.dragged)
         .on("end", funcs.dragended)
     )
-    .on("mouseover", function (event: any, d: { name: string }) {
+    .on("mouseover", function (event: any, d: Node) {
       tip
         .html(() => {
-          return `<div>${d.name}</div>`;
+          return `
+          <div class="mb-5"><span class="grey">${t("cpm")}: </span>${
+            d.cpm
+          }</div>
+          <div class="mb-5"><span class="grey">${t("latency")}: </span>${
+            d.latency
+          }</div>
+          <div><span class="grey">${t("sla")}: </span>${d.sla}</div>
+        `;
         })
         .show(d, this);
     })