fix: add templates to optimize log content and update topology tooltips (#550)

src/views/dashboard/related/log/LogTable/LogService.vue

@@ -27,7 +27,12 @@ limitations under the License. -->
           <Icon iconName="merge" />
         </el-tooltip>
       </span>
-      <span v-else v-html="highlightKeywords(getDataValue(item.label))"></span>
+      <span v-else>
+        <template v-for="(part, partIndex) in highlightKeywords(getDataValue(item.label))" :key="partIndex">
+          <span v-if="part.highlight" class="keyword-highlight">{{ part.text }}</span>
+          <template v-else>{{ part.text }}</template>
+        </template>
+      </span>
     </div>
   </div>
 </template>
@@ -59,10 +64,41 @@ limitations under the License. -->
     }
     return (props.data.tags.find((d: { key: string; value: string }) => d.key === "level") || {}).value || "";
   });
-  const highlightKeywords = (content: string) => {
-    const keywords = Object.values(logStore.conditions.keywordsOfContent || {});
-    const regex = new RegExp(keywords.join("|"), "gi");
-    return `${content}`.replace(regex, (match) => `<span style="color: red">${match}</span>`);
+  type HighlightPart = {
+    text: string;
+    highlight: boolean;
+  };
+
+  const escapeRegExp = (value: string) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+  const highlightKeywords = (content: string): HighlightPart[] => {
+    const text = `${content || ""}`;
+    const keywords = [
+      ...new Set(Object.values(logStore.conditions.keywordsOfContent || {}).map((keyword) => `${keyword}`.trim())),
+    ].filter(Boolean);
+
+    if (!keywords.length) {
+      return [{ text, highlight: false }];
+    }
+
+    const regex = new RegExp(keywords.map(escapeRegExp).join("|"), "gi");
+    const parts: HighlightPart[] = [];
+    let lastIndex = 0;
+    let match: RegExpExecArray | null;
+
+    while ((match = regex.exec(text)) !== null) {
+      if (match.index > lastIndex) {
+        parts.push({ text: text.slice(lastIndex, match.index), highlight: false });
+      }
+      parts.push({ text: match[0], highlight: true });
+      lastIndex = regex.lastIndex;
+    }
+
+    if (lastIndex < text.length) {
+      parts.push({ text: text.slice(lastIndex), highlight: false });
+    }
+
+    return parts.length ? parts : [{ text, highlight: false }];
   };
 
   function getDataValue(label: string) {
@@ -165,4 +201,8 @@ limitations under the License. -->
   .warning {
     color: var(--sw-orange);
   }
+
+  .keyword-highlight {
+    color: var(--sw-red);
+  }
 </style>

src/views/dashboard/related/network-profiling/components/ProcessTopology.vue

@@ -461,14 +461,28 @@ limitations under the License. -->
     }
   }
 
-  function showNodeTip(d: ProcessNode, event: MouseEvent) {
-    const tipHtml = ` <div class="mb-5"><span class="grey">name: </span>${d.name}</div>`;
+  type TooltipRow = {
+    label: string;
+    value: unknown;
+  };
 
+  function renderTooltipRows(rows: TooltipRow[]) {
+    tooltip.value.html("");
+    const row = tooltip.value.selectAll("div").data(rows).enter().append("div").attr("class", "mb-5");
+
+    row
+      .append("span")
+      .attr("class", "grey")
+      .text((d: TooltipRow) => `${d.label}: `);
+    row.append("span").text((d: TooltipRow) => `${d.value ?? ""}`);
+  }
+
+  function showNodeTip(d: ProcessNode, event: MouseEvent) {
     tooltip.value
       .style("top", event.offsetY + "px")
       .style("left", event.offsetX + "px")
-      .style("visibility", "visible")
-      .html(tipHtml);
+      .style("visibility", "visible");
+    renderTooltipRows([{ label: "name", value: d.name }]);
   }
 
   function hideNodeTip() {
@@ -487,14 +501,14 @@ limitations under the License. -->
     if (types.includes("tls")) {
       l = "TLS";
     }
-    const tipHtml = `<div><span class="grey">${t("detectPoint")}: </span>${link.detectPoints.join(" | ")}</div>
-        <div><span class="grey">Type: </span>${l}</div>`;
-
     tooltip.value
       .style("top", event.offsetY + "px")
       .style("left", event.offsetX + "px")
-      .style("visibility", "visible")
-      .html(tipHtml);
+      .style("visibility", "visible");
+    renderTooltipRows([
+      { label: t("detectPoint"), value: link.detectPoints.join(" | ") },
+      { label: "Type", value: l },
+    ]);
   }
 
   function hideLinkTip() {

src/views/dashboard/related/topology/pod/InstanceMap.vue

@@ -122,27 +122,33 @@ limitations under the License. -->
       ).dashboard || {};
     const exprssions = dashboard.expressions || [];
     const nodeMetricConfig = dashboard.expressionsConfig || [];
-    const html = exprssions.map((m: string, index: number) => {
+    const metrics = exprssions.map((m: string, index: number) => {
       const metric =
         topologyStore.hierarchyInstanceNodeMetrics[data.layer || ""][m].values.find(
           (val: { id: string; value: unknown }) => val.id === data.id,
         ) || null;
       const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
 
-      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric?.value || NaN} ${
-        opt.unit || ""
-      }</div>`;
+      return {
+        label: opt.label || m,
+        value: `${metric?.value || NaN} ${opt.unit || ""}`,
+      };
     });
-    const tipHtml = [
-      `<div class="mb-5"><span class="grey">name: </span>${data.name}</div><div class="mb-5"><span class="grey">layer: </span>${data.layer}</div>`,
-      ...html,
-    ].join(" ");
 
     popover.value
       .style("top", event.offsetY + 10 + "px")
       .style("left", event.offsetX + 10 + "px")
       .style("visibility", "visible")
-      .html(tipHtml);
+      .html("");
+
+    const rows = [{ label: "name", value: data.name }, { label: "layer", value: data.layer }, ...metrics];
+
+    const row = popover.value.selectAll("div").data(rows).enter().append("div").attr("class", "mb-5");
+    row
+      .append("span")
+      .attr("class", "grey")
+      .text((d: { label: string }) => `${d.label}: `);
+    row.append("span").text((d: { value: unknown }) => `${d.value ?? ""}`);
   }
 
   function hideTip() {

src/views/dashboard/related/topology/service/HierarchyMap.vue

@@ -130,26 +130,32 @@ limitations under the License. -->
       ).dashboard || {};
     const exprssions = dashboard.expressions || [];
     const nodeMetricConfig = dashboard.expressionsConfig || [];
-    const html = exprssions.map((m: string, index: number) => {
+    const metrics = exprssions.map((m: string, index: number) => {
       const metric =
         topologyStore.hierarchyNodeMetrics[data.layer || ""][m].values.find(
           (val: { id: string; value: unknown }) => val.id === data.id,
         ) || null;
       const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
-      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric?.value || NaN} ${
-        opt.unit || ""
-      }</div>`;
-    });
-    const tipHtml = [
-      `<div class="mb-5"><span class="grey">name: </span>${data.name}</div><div class="mb-5"><span class="grey">layer: </span>${data.layer}</div>`,
-      ...html,
-    ].join(" ");
 
+      return {
+        label: opt.label || m,
+        value: `${metric?.value || NaN} ${opt.unit || ""}`,
+      };
+    });
     popover.value
       .style("top", event.offsetY + 10 + "px")
       .style("left", event.offsetX + 10 + "px")
       .style("visibility", "visible")
-      .html(tipHtml);
+      .html("");
+
+    const rows = [{ label: "name", value: data.name }, { label: "layer", value: data.layer }, ...metrics];
+
+    const row = popover.value.selectAll("div").data(rows).enter().append("div").attr("class", "mb-5");
+    row
+      .append("span")
+      .attr("class", "grey")
+      .text((d: { label: string }) => `${d.label}: `);
+    row.append("span").text((d: { value: unknown }) => `${d.value ?? ""}`);
   }
 
   function hideTip() {

src/views/dashboard/related/topology/service/ServiceMap.vue

@@ -304,70 +304,103 @@ limitations under the License. -->
     }
     return Number(d[legendMQE.expression]) && d.isReal ? icons.CUBEERROR : icons.CUBE;
   }
+
+  type TooltipRow = {
+    label: string;
+    value: unknown;
+  };
+
+  function isTooltipRow(row: TooltipRow | null): row is TooltipRow {
+    return Boolean(row);
+  }
+
+  function renderTooltipRows(rows: TooltipRow[]) {
+    tooltip.value.html("");
+    const row = tooltip.value.selectAll("div").data(rows).enter().append("div").attr("class", "mb-5");
+
+    row
+      .append("span")
+      .attr("class", "grey")
+      .text((d: TooltipRow) => `${d.label}: `);
+    row.append("span").text((d: TooltipRow) => `${d.value ?? ""}`);
+  }
+
   function showNodeTip(event: MouseEvent, data: Node) {
     const nodeMetrics: string[] = settings.value.nodeExpressions || [];
     const nodeMetricConfig = settings.value.nodeMetricConfig || [];
-    const html = nodeMetrics.map((m, index) => {
+    const metrics = nodeMetrics.map((m, index) => {
       const metric =
         topologyStore.nodeMetricValue[m]?.values?.find((val: { id: string; value: unknown }) => val.id === data.id) ||
         null;
       const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
-      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric?.value || NaN} ${
-        opt.unit || "unknown"
-      }</div>`;
+
+      return {
+        label: opt.label || m,
+        value: `${metric?.value || NaN} ${opt.unit || "unknown"}`,
+      };
     });
-    let tipHtml = `<div class="mb-5"><span class="grey">name: </span>${
-      data.name
-    }</div><div class="mb-5"><span class="grey">type: </span>${data.type || "UNKNOWN"}</div>`;
-    if (data.isReal) {
-      tipHtml = [tipHtml, ...html].join(" ");
-    }
+    const rows = [
+      { label: "name", value: data.name },
+      { label: "type", value: data.type || "UNKNOWN" },
+    ];
+    const tipRows = data.isReal ? [...rows, ...metrics] : rows;
+
     tooltip.value
       .style("top", event.offsetY + 10 + "px")
       .style("left", event.offsetX + 10 + "px")
-      .style("visibility", "visible")
-      .html(tipHtml);
+      .style("visibility", "visible");
+    renderTooltipRows(tipRows);
   }
   function showLinkTip(event: MouseEvent, data: Call) {
     const linkClientMetrics: string[] = settings.value.linkClientExpressions || [];
     const linkServerMetricConfig: MetricConfigOpt[] = settings.value.linkServerMetricConfig || [];
     const linkClientMetricConfig: MetricConfigOpt[] = settings.value.linkClientMetricConfig || [];
     const linkServerMetrics: string[] = settings.value.linkServerExpressions || [];
-    const htmlServer = linkServerMetrics.map((m, index) => {
-      const metric = topologyStore.linkServerMetrics[m]?.values?.find(
-        (val: { id: string; value: unknown }) => val.id === data.id,
-      );
-      if (metric) {
-        const opt: MetricConfigOpt = linkServerMetricConfig[index] || {};
-        return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
-          opt.unit || ""
-        }</div>`;
-      }
-    });
-    const htmlClient = linkClientMetrics.map((m: string, index: number) => {
-      const opt: MetricConfigOpt = linkClientMetricConfig[index] || {};
-      const metric = topologyStore.linkClientMetrics[m]?.values?.find(
-        (val: { id: string; value: unknown }) => val.id === data.id,
-      );
-      if (metric) {
-        return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
-          opt.unit || ""
-        }</div>`;
-      }
-    });
-    const html = [
-      ...htmlServer,
-      ...htmlClient,
-      `<div><span class="grey">${t("detectPoint")}:</span>${data.detectPoints.join(" | ")}</div>`,
-    ].join(" ");
+    const serverRows = linkServerMetrics
+      .map((m, index): TooltipRow | null => {
+        const metric = topologyStore.linkServerMetrics[m]?.values?.find(
+          (val: { id: string; value: unknown }) => val.id === data.id,
+        );
+        if (metric) {
+          const opt: MetricConfigOpt = linkServerMetricConfig[index] || {};
+          return {
+            label: opt.label || m,
+            value: `${metric.value || NaN} ${opt.unit || ""}`,
+          };
+        }
+        return null;
+      })
+      .filter(isTooltipRow);
+    const clientRows = linkClientMetrics
+      .map((m: string, index: number): TooltipRow | null => {
+        const opt: MetricConfigOpt = linkClientMetricConfig[index] || {};
+        const metric = topologyStore.linkClientMetrics[m]?.values?.find(
+          (val: { id: string; value: unknown }) => val.id === data.id,
+        );
+        if (metric) {
+          return {
+            label: opt.label || m,
+            value: `${metric.value || NaN} ${opt.unit || ""}`,
+          };
+        }
+        return null;
+      })
+      .filter(isTooltipRow);
+    const rows = [
+      ...serverRows,
+      ...clientRows,
+      {
+        label: t("detectPoint"),
+        value: data.detectPoints.join(" | "),
+      },
+    ];
 
     tooltip.value
       .style("top", event.offsetY + "px")
       .style("left", event.offsetX + "px")
-      .style("visibility", "visible")
-      .html(html);
+      .style("visibility", "visible");
+    renderTooltipRows(rows);
   }
-
   function hideTip() {
     tooltip.value.style("visibility", "hidden");
   }