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

refactor graph

Browse Source
This commit is contained in:
Fine 2022-08-09 20:08:06 +08:00
parent 5f763dafb9
commit 77b3ff3995
10 changed files with 22 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/views/dashboard/related/network-profiling/components/utils/linkElement.ts → src/views/dashboard/related/components/D3Graph/linkElement.ts
View File

2
src/views/dashboard/related/topology/utils/nodeElement.ts → src/views/dashboard/related/components/D3Graph/nodeElement.ts
View File

@ -18,7 +18,7 @@ import icons from "@/assets/img/icons";
import { Node } from "@/types/topology";
icons["KAFKA-CONSUMER"] = icons.KAFKA;
export default (d3: any, graph: any, funcs: any, tip: any, legend: any) => {
export default (d3: any, graph: any, funcs: any, tip: any, legend?: any) => {
const nodeEnter = graph
.append("g")
.call(

0
src/views/dashboard/related/network-profiling/components/utils/simulation.ts → src/views/dashboard/related/components/D3Graph/simulation.ts
View File

0
src/views/dashboard/related/network-profiling/components/utils/zoom.ts → src/views/dashboard/related/components/D3Graph/zoom.ts
View File

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

@ -23,11 +23,18 @@ import { useI18n } from "vue-i18n";
import { useEbpfStore } from "@/store/modules/ebpf";
import { useDashboardStore } from "@/store/modules/dashboard";
import d3tip from "d3-tip";
import { simulationInit, simulationSkip } from "./utils/simulation";
import { linkElement, anchorElement, arrowMarker } from "./utils/linkElement";
import nodeElement from "./utils/nodeElement";
import {
simulationInit,
simulationSkip,
} from "../../components/D3Graph/simulation";
import {
linkElement,
anchorElement,
arrowMarker,
} from "../../components/D3Graph/linkElement";
import nodeElement from "../../components/D3Graph/nodeElement";
import { Call } from "@/types/topology";
import zoom from "./utils/zoom";
import zoom from "../../components/D3Graph/zoom";
import { ProcessNode } from "@/types/ebpf";
/*global Nullable, defineProps */

81
src/views/dashboard/related/network-profiling/components/utils/nodeElement.ts
View File

@ -1,81 +0,0 @@
/**
* 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 "@/assets/img/icons";
import { Node } from "@/types/topology";
icons["KAFKA-CONSUMER"] = icons.KAFKA;
export default (d3: any, graph: any, funcs: any, tip: 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(funcs.tipHtml).show(d, this);
})
.on("mouseout", function () {
tip.hide(this);
})
.on("click", (event: any, d: Node | any) => {
event.stopPropagation();
event.preventDefault();
funcs.handleNodeClick(d);
});
nodeEnter
.append("image")
.attr("width", 49)
.attr("height", 49)
.attr("x", 2)
.attr("y", 10)
.attr("style", "cursor: move;")
.attr("xlink:href", (d: { [key: string]: number }) => {
return d.isReal ? 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;
};

13
src/views/dashboard/related/topology/components/Graph.vue
View File

@ -95,9 +95,16 @@ import { useI18n } from "vue-i18n";
import * as d3 from "d3";
import d3tip from "d3-tip";
import zoom from "../utils/zoom";
import { simulationInit, simulationSkip } from "../utils/simulation";
import nodeElement from "../utils/nodeElement";
import { linkElement, anchorElement, arrowMarker } from "../utils/linkElement";
import {
simulationInit,
simulationSkip,
} from "../../components/D3Graph/simulation";
import nodeElement from "../../components/D3Graph/nodeElement";
import {
linkElement,
anchorElement,
arrowMarker,
} from "../../components/D3Graph/linkElement";
import { Node, Call } from "@/types/topology";
import { useSelectorStore } from "@/store/modules/selectors";
import { useTopologyStore } from "@/store/modules/topology";

60
src/views/dashboard/related/topology/utils/linkElement.ts
View File

@ -1,60 +0,0 @@
/**
* 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.
*/
export const linkElement = (graph: any) => {
const linkEnter = graph
.append("path")
.attr("class", "topo-line")
.attr("marker-end", "url(#arrow)")
.attr("stroke", "#217EF25f");
return linkEnter;
};
export const anchorElement = (graph: any, funcs: any, tip: any) => {
const linkEnter = graph
.append("circle")
.attr("class", "topo-line-anchor")
.attr("r", 5)
.attr("fill", "#217EF25f")
.on("mouseover", function (event: unknown, d: unknown) {
tip.html(funcs.tipHtml).show(d, this);
})
.on("mouseout", function () {
tip.hide(this);
})
.on("click", (event: unknown, d: unknown) => {
funcs.handleLinkClick(event, d);
});
return linkEnter;
};
export const arrowMarker = (graph: any) => {
const defs = graph.append("defs");
const arrow = defs
.append("marker")
.attr("id", "arrow")
.attr("class", "topo-line-arrow")
.attr("markerUnits", "strokeWidth")
.attr("markerWidth", "6")
.attr("markerHeight", "6")
.attr("viewBox", "0 0 12 12")
.attr("refX", "5")
.attr("refY", "6")
.attr("orient", "auto");
const arrowPath = "M2,2 L10,6 L2,10 L6,6 L2,2";
arrow.append("path").attr("d", arrowPath).attr("fill", "#217EF25f");
return arrow;
};

56
src/views/dashboard/related/topology/utils/simulation.ts
View File

@ -1,56 +0,0 @@
/**
* 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.
*/
export const simulationInit = (
d3: any,
dataNodes: any,
dataLinks: any,
ticked: any
) => {
const simulation = d3
.forceSimulation(dataNodes)
.force(
"collide",
d3.forceCollide().radius(() => 60)
)
.force("yPos", d3.forceY().strength(1))
.force("xPos", d3.forceX().strength(1))
.force("charge", d3.forceManyBody().strength(-520))
.force(
"link",
d3.forceLink(dataLinks).id((d: { id: string }) => d.id)
)
.force(
"center",
d3.forceCenter(window.innerWidth / 2, window.innerHeight / 2 - 20)
)
.on("tick", ticked)
.stop();
simulationSkip(d3, simulation, ticked);
return simulation;
};
export const simulationSkip = (d3: any, simulation: any, ticked: any) => {
d3.timeout(() => {
const n = Math.ceil(
Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())
);
for (let i = 0; i < n; i += 1) {
simulation.tick();
ticked();
}
});
};

28
src/views/dashboard/related/topology/utils/zoom.ts
View File

@ -1,28 +0,0 @@
/**
* 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.
*/
export default (d3: any, graph: any) =>
d3
.zoom()
.scaleExtent([0.3, 10])
.on("zoom", (d: any) => {
graph
.attr("transform", d3.zoomTransform(graph.node()))
.attr(
`translate(${d.transform.x},${d.transform.y})scale(${d.transform.k})`
);
});