github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-18 23:44:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

update interface

Browse Source
This commit is contained in:
Fine 2022-08-25 11:23:17 +08:00
parent dd3604b7b1
commit a68f55f281
2 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/types/topology.d.ts vendored
View File

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

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

@ -15,13 +15,15 @@
* limitations under the License. * limitations under the License.
*/ */
import icons from "@/assets/img/icons"; import icons from "@/assets/img/icons";
import { Call } from "@/types/topology";
export const linkElement = (graph: any) => { export const linkElement = (graph: any) => {
const linkEnter = graph const linkEnter = graph
.append("path") .append("path")
.attr("class", "topo-call") .attr("class", "topo-call")
.attr("marker-end", "url(#arrow)") .attr("marker-end", "url(#arrow)")
.attr("stroke", "#97B0F8") .attr("stroke", "#97B0F8")
.attr("d", (d: any) => { .attr("d", (d: Call) => {
const controlPos = computeControlPoint( const controlPos = computeControlPoint(
[d.source.x, d.source.y], [d.source.x, d.source.y],
[d.target.x, d.target.y], [d.target.x, d.target.y],
@ -65,15 +67,15 @@ export const anchorElement = (graph: any, funcs: any, tip: any) => {
.append("text") .append("text")
.attr("fill", "#444") .attr("fill", "#444")
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.attr("x", (d: any) => { .attr("x", (d: Call) => {
const p = getMidpoint(d); const p = getMidpoint(d);
return p[0] + 2; return p[0] + 2;
}) })
.attr("y", (d: any) => { .attr("y", (d: Call) => {
const p = getMidpoint(d); const p = getMidpoint(d);
return p[1] + 5; return p[1] + 5;
}) })
.text((d: any) => { .text((d: Call) => {
const types = [...d.sourceComponents, ...d.targetComponents]; const types = [...d.sourceComponents, ...d.targetComponents];
if (types.includes("tcp")) { if (types.includes("tcp")) {
return "tcp"; return "tcp";
@ -92,15 +94,15 @@ export const anchorElement = (graph: any, funcs: any, tip: any) => {
.append("image") .append("image")
.attr("width", 15) .attr("width", 15)
.attr("height", 15) .attr("height", 15)
.attr("x", (d: any) => { .attr("x", (d: Call) => {
const p = getMidpoint(d); const p = getMidpoint(d);
return p[0] - 6; return p[0] - 6;
}) })
.attr("y", (d: any) => { .attr("y", (d: Call) => {
const p = getMidpoint(d); const p = getMidpoint(d);
return p[1] - 16; return p[1] - 16;
}) })
.attr("xlink:href", (d: any) => { .attr("xlink:href", (d: Call) => {
const types = [...d.sourceComponents, ...d.targetComponents]; const types = [...d.sourceComponents, ...d.targetComponents];
if (types.includes("tcp")) { if (types.includes("tcp")) {
return icons.HTTPDARK; return icons.HTTPDARK;
@ -165,7 +167,7 @@ function quadraticBezier(
const y = (1 - t) * (1 - t) * ps.y + 2 * t * (1 - t) * pc.y + t * t * pe.y; const y = (1 - t) * (1 - t) * ps.y + 2 * t * (1 - t) * pc.y + t * t * pe.y;
return [x, y]; return [x, y];
} }
function getMidpoint(d: any) { function getMidpoint(d: Call) {
const controlPos = computeControlPoint( const controlPos = computeControlPoint(
[d.source.x, d.source.y], [d.source.x, d.source.y],
[d.target.x, d.target.y], [d.target.x, d.target.y],