mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-07-18 11:45:24 +00:00
110 lines
3.2 KiB
TypeScript
110 lines
3.2 KiB
TypeScript
/**
|
|
* Licensed to the Apache Software Foundation (ASF) under one or more
|
|
* contributor license agreements. See the NOTICE file distributed with
|
|
* this work for additional information regarding copyright ownership.
|
|
* The ASF licenses this file to You under the Apache License, Version 2.0
|
|
* (the "License"); you may not use this file except in compliance with
|
|
* the License. You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* 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,
|
|
t: any
|
|
) => {
|
|
const nodeEnter = graph
|
|
.append("g")
|
|
.call(
|
|
d3
|
|
.drag()
|
|
.on("start", funcs.dragstart)
|
|
.on("drag", funcs.dragged)
|
|
.on("end", funcs.dragended)
|
|
)
|
|
.on("mouseover", function (event: any, d: Node) {
|
|
tip
|
|
.html(() => {
|
|
return `
|
|
<div class="mb-5"><span class="grey">${t("name")}: </span>${
|
|
d.name
|
|
}</div>
|
|
<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);
|
|
})
|
|
.on("mouseout", function () {
|
|
tip.hide(this);
|
|
})
|
|
.on("click", (event: any, d: Node | any) => {
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
tool.attr("style", "display: none");
|
|
funcs.handleNodeClick(d);
|
|
if (d.isReal) {
|
|
tool
|
|
.attr("transform", `translate(${d.x},${d.y - 20})`)
|
|
.attr("style", "display: block");
|
|
}
|
|
});
|
|
nodeEnter
|
|
.append("image")
|
|
.attr("width", 49)
|
|
.attr("height", 49)
|
|
.attr("x", 2)
|
|
.attr("y", 10)
|
|
.attr("style", "cursor: move;")
|
|
.attr("xlink:href", (d: { isReal: number; sla: number; cpm: number }) =>
|
|
d.sla < 95 && d.isReal && d.cpm > 1 ? icons.CUBEERROR : icons.CUBE
|
|
);
|
|
nodeEnter
|
|
.append("image")
|
|
.attr("width", 32)
|
|
.attr("height", 32)
|
|
.attr("x", 6)
|
|
.attr("y", -10)
|
|
.attr("style", "opacity: 0.5;")
|
|
.attr("xlink:href", icons.LOCAL);
|
|
nodeEnter
|
|
.append("image")
|
|
.attr("width", 18)
|
|
.attr("height", 18)
|
|
.attr("x", 13)
|
|
.attr("y", -7)
|
|
.attr("xlink:href", (d: { type: string }) =>
|
|
!d.type || d.type === "N/A"
|
|
? icons.UNDEFINED
|
|
: icons[d.type.toUpperCase().replace("-", "")]
|
|
);
|
|
nodeEnter
|
|
.append("text")
|
|
.attr("class", "topo-text")
|
|
.attr("text-anchor", "middle")
|
|
.attr("x", 22)
|
|
.attr("y", 70)
|
|
.text((d: { name: string }) =>
|
|
d.name.length > 20 ? `${d.name.substring(0, 20)}...` : d.name
|
|
);
|
|
return nodeEnter;
|
|
};
|