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

resize

Browse Source
This commit is contained in:
Fine 2022-08-10 11:16:33 +08:00
parent 77b3ff3995
commit 9ade1fcaaf
2 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,8 +34,9 @@ import {
} from "../../components/D3Graph/linkElement"; } from "../../components/D3Graph/linkElement";
import nodeElement from "../../components/D3Graph/nodeElement"; import nodeElement from "../../components/D3Graph/nodeElement";
import { Call } from "@/types/topology"; import { Call } from "@/types/topology";
import zoom from "../../components/D3Graph/zoom"; // import zoom from "../../components/D3Graph/zoom";
import { ProcessNode } from "@/types/ebpf"; import { ProcessNode } from "@/types/ebpf";
import { useThrottleFn } from "@vueuse/core";
/*global Nullable, defineProps */ /*global Nullable, defineProps */
const props = defineProps({ const props = defineProps({
@ -58,14 +59,18 @@ const node = ref<any>(null);
const link = ref<any>(null); const link = ref<any>(null);
const anchor = ref<any>(null); const anchor = ref<any>(null);
const arrow = ref<any>(null); const arrow = ref<any>(null);
const oldVal = ref<{ width: number; height: number }>({ width: 0, height: 0 });
onMounted(() => { onMounted(() => {
init(); init();
oldVal.value = (chart.value && chart.value.getBoundingClientRect()) || {
width: 0,
height: 0,
};
}); });
async function init() { async function init() {
svg.value = d3.select(chart.value).append("svg").attr("class", "process-svg"); svg.value = d3.select(chart.value).append("svg").attr("class", "process-svg");
window.addEventListener("resize", resize);
if (!ebpfStore.nodes.length) { if (!ebpfStore.nodes.length) {
return; return;
} }
@ -74,9 +79,7 @@ async function init() {
} }
function drawGraph() { function drawGraph() {
const dom = document const dom = chart.value?.getBoundingClientRect() || {
.querySelector(".micro-topo-chart")
?.getBoundingClientRect() || {
height: 40, height: 40,
width: 0, width: 0,
}; };
@ -87,7 +90,7 @@ function drawGraph() {
graph.value = svg.value graph.value = svg.value
.append("g") .append("g")
.attr("class", "svg-graph") .attr("class", "svg-graph")
.attr("transform", `translate(-100, -100)`); .attr("transform", `translate(-250, -220)`);
graph.value.call(tip.value); graph.value.call(tip.value);
simulation.value = simulationInit( simulation.value = simulationInit(
d3, d3,
@ -99,7 +102,7 @@ function drawGraph() {
link.value = graph.value.append("g").selectAll(".topo-line"); link.value = graph.value.append("g").selectAll(".topo-line");
anchor.value = graph.value.append("g").selectAll(".topo-line-anchor"); anchor.value = graph.value.append("g").selectAll(".topo-line-anchor");
arrow.value = graph.value.append("g").selectAll(".topo-line-arrow"); arrow.value = graph.value.append("g").selectAll(".topo-line-arrow");
svg.value.call(zoom(d3, graph.value)); // svg.value.call(zoom(d3, graph.value));
svg.value.on("click", (event: any) => { svg.value.on("click", (event: any) => {
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();
@ -107,6 +110,7 @@ function drawGraph() {
ebpfStore.setLink(null); ebpfStore.setLink(null);
dashboardStore.selectWidget(props.config); dashboardStore.selectWidget(props.config);
}); });
useThrottleFn(resize, 500)();
} }
function update() { function update() {
// node element // node element
@ -211,13 +215,21 @@ function ticked() {
} }
function resize() { function resize() {
const dom = chart.value?.getBoundingClientRect() || { const observer = new ResizeObserver((entries) => {
height: 40, const entry = entries[0];
width: 0, const cr = entry.contentRect;
}; if (
height.value = dom.height - 40; Math.abs(cr.width - oldVal.value.width) < 5 &&
width.value = dom.width; Math.abs(cr.height - oldVal.value.height) < 5
svg.value.attr("height", height.value).attr("width", width.value); ) {
return;
}
freshNodes();
oldVal.value = { width: cr.width, height: cr.height };
});
if (chart.value) {
observer.observe(chart.value);
}
} }
async function freshNodes() { async function freshNodes() {

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

@ -94,7 +94,7 @@ import {
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import * as d3 from "d3"; import * as d3 from "d3";
import d3tip from "d3-tip"; import d3tip from "d3-tip";
import zoom from "../utils/zoom"; import zoom from "../../components/D3Graph/zoom";
import { import {
simulationInit, simulationInit,
simulationSkip, simulationSkip,