Merge branch 'main' of github.com:apache/skywalking-booster-ui into feat/async-profile

src/utils/copy.ts

@@ -16,18 +16,22 @@
  */
 
 import { ElNotification } from "element-plus";
-export default (value: string): void => {
-  const input = document.createElement("input");
-  input.value = value;
-  document.body.appendChild(input);
-  input.select();
-  if (document.execCommand("Copy")) {
-    document.execCommand("Copy");
-  }
-  input.remove();
-  ElNotification({
-    title: "Success",
-    message: "Copied",
-    type: "success",
-  });
+
+export default (text: string): void => {
+  navigator.clipboard
+    .writeText(text)
+    .then(() => {
+      ElNotification({
+        title: "Success",
+        message: "Copied",
+        type: "success",
+      });
+    })
+    .catch((err) => {
+      ElNotification({
+        title: "Error",
+        message: err,
+        type: "warning",
+      });
+    });
 };

src/views/dashboard/panel/Layout.vue

@@ -88,7 +88,7 @@ limitations under the License. -->
             const index = isNaN(item.activedTabIndex) ? 0 : item.activedTabIndex;
             widgets.push(
               ...item.children[index].children.filter(
-                (d: LayoutConfig) => !ListChartTypes.includes(d.graph?.type || ""),
+                (d: LayoutConfig) => d.type === WidgetType.Widget && !ListChartTypes.includes(d.graph?.type || ""),
               ),
             );
           }

src/views/dashboard/related/trace/utils/d3-trace-list.ts

@@ -302,37 +302,36 @@ export default class ListGraph {
       )
       .attr("y", -2)
       .style("fill", (d: Recordable) => `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`);
-    nodeEnter
+    const nodeUpdate = nodeEnter.merge(node);
+    nodeUpdate
       .transition()
       .duration(400)
       .attr("transform", (d: Recordable) => `translate(${d.y + 5},${d.x})`)
       .style("opacity", 1);
-    nodeEnter
+    nodeUpdate
       .append("circle")
       .attr("r", appStore.theme === Themes.Dark ? 4 : 3)
       .style("cursor", "pointer")
       .attr("stroke-width", appStore.theme === Themes.Dark ? 3 : 2.5)
-      .attr("fill", (d: Recordable) =>
-        d._children
-          ? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`
-          : appStore.theme === Themes.Dark
-          ? "#eee"
-          : "rbga(0,0,0,0)",
+      .style("fill", (d: Recordable) =>
+        d._children ? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}` : "#eee",
       )
       .style("stroke", (d: Recordable) =>
         d.data.label === "TRACE_ROOT" ? "" : `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`,
       )
-      .on("click", (d: Recordable) => {
+      .on("click", (event: any, d: Recordable) => {
+        event.stopPropagation();
+        if (d.data.children.length == 0) return;
         this.click(d, this);
       });
-    node
+    nodeUpdate
       .transition()
       .duration(400)
       .attr("transform", (d: Recordable) => `translate(${d.y + 3},${d.x})`)
       .style("opacity", 1)
       .select("circle")
-      .attr("fill", (d: Recordable) =>
-        d._children ? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}` : "",
+      .style("fill", (d: Recordable) =>
+        d._children ? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}` : "#eee",
       );
 
     // Transition exiting nodes to the parent's new position.

src/views/dashboard/related/trace/utils/d3-trace-tree.ts

@@ -294,7 +294,9 @@ export default class TraceMap {
         d._children ? this.sequentialScale(this.list.indexOf(d.data.serviceCode)) : "#fff",
       )
       .attr("cursor", "pointer")
-      .on("click", (d: Recordable) => {
+      .on("click", (event: any, d: Recordable) => {
+        event.stopPropagation();
+        if (d.data.children.length == 0) return;
         click(d);
       });
     const nodeExit = node