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

update tooltips

Browse Source
This commit is contained in:
Fine 2022-09-14 10:35:03 +08:00
parent df42b263f4
commit 01514533c9
1 changed files with 41 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,7 +37,7 @@ limitations under the License. -->
v-for="(node, index) in nodeList" v-for="(node, index) in nodeList"
:key="index" :key="index"
class="topo-node" class="topo-node"
@mouseover="showNodeTip(node)" @mouseover="showNodeTip(node, $event)"
@mouseout="hideNodeTip" @mouseout="hideNodeTip"
> >
<image <image
@ -78,6 +78,8 @@ limitations under the License. -->
:x="getMidpoint(call)[0] - 8" :x="getMidpoint(call)[0] - 8"
:y="getMidpoint(call)[1] - 13" :y="getMidpoint(call)[1] - 13"
@click="handleLinkClick($event, call)" @click="handleLinkClick($event, call)"
@mouseover="showLinkTip(call, $event)"
@mouseout="hideLinkTip"
/> />
</g> </g>
<g class="arrows"> <g class="arrows">
@ -120,7 +122,6 @@ import router from "@/router";
import { useNetworkProfilingStore } from "@/store/modules/network-profiling"; import { useNetworkProfilingStore } from "@/store/modules/network-profiling";
import { useDashboardStore } from "@/store/modules/dashboard"; import { useDashboardStore } from "@/store/modules/dashboard";
import { useSelectorStore } from "@/store/modules/selectors"; import { useSelectorStore } from "@/store/modules/selectors";
import d3tip from "d3-tip";
import { linkPath, getAnchor, getMidpoint } from "./Graph/linkProcess"; import { linkPath, getAnchor, getMidpoint } from "./Graph/linkProcess";
import { Call } from "@/types/topology"; import { Call } from "@/types/topology";
import zoom from "../../components/utils/zoom"; import zoom from "../../components/utils/zoom";
@ -152,7 +153,6 @@ const chart = ref<Nullable<HTMLDivElement>>(null);
const tooltip = ref<Nullable<any>>(null); const tooltip = ref<Nullable<any>>(null);
const svg = ref<Nullable<any>>(null); const svg = ref<Nullable<any>>(null);
const graph = ref<Nullable<any>>(null); const graph = ref<Nullable<any>>(null);
const tip = ref<Nullable<any>>(null);
const oldVal = ref<{ width: number; height: number }>({ width: 0, height: 0 }); const oldVal = ref<{ width: number; height: number }>({ width: 0, height: 0 });
const config = ref<any>(props.config || {}); const config = ref<any>(props.config || {});
const diff = ref<number[]>([220, 200]); const diff = ref<number[]>([220, 200]);
@ -187,8 +187,6 @@ function drawGraph() {
height.value = (dom.height || 40) - 20; height.value = (dom.height || 40) - 20;
width.value = dom.width; width.value = dom.width;
diff.value[0] = (dom.width - radius * 2) / 2 + radius; diff.value[0] = (dom.width - radius * 2) / 2 + radius;
tip.value = (d3tip as any)().attr("class", "d3-tip").offset([-8, 0]);
graph.value.call(tip.value);
svg.value.call(zoom(d3, graph.value, diff.value)); svg.value.call(zoom(d3, graph.value, diff.value));
} }
@ -434,18 +432,48 @@ async function freshNodes() {
createLayout(); createLayout();
} }
function showNodeTip(d: any) { function showNodeTip(d: ProcessNode, event: MouseEvent) {
const tipHtml = ` <div class="mb-5"><span class="grey">name: </span>${d.name}</div>`; const tipHtml = ` <div class="mb-5"><span class="grey">name: </span>${d.name}</div>`;
tooltip.value tooltip.value
.style("top", d.y + diff.value[1] - 30 + "px") .style("top", event.offsetY + "px")
.style("left", d.x + diff.value[0] - 20 + "px"); .style("left", event.offsetX + "px")
tooltip.value.style("visibility", "visible"); .style("visibility", "visible")
.html(tipHtml);
} }
function hideNodeTip() { function hideNodeTip() {
tooltip.value.style("visibility", "hidden"); tooltip.value.style("visibility", "hidden");
} }
function showLinkTip(link: Call, event: MouseEvent) {
const types = [...link.sourceComponents, ...link.targetComponents];
let l = "TCP";
if (types.includes("https")) {
l = "HTTPS";
}
if (types.includes("http")) {
l = "HTTP";
}
if (types.includes("tls")) {
l = "TLS";
}
const tipHtml = `<div><span class="grey">${t(
"detectPoint"
)}: </span>${link.detectPoints.join(" | ")}</div>
<div><span class="grey">Type: </span>${l}</div>`;
tooltip.value
.style("top", event.offsetY + "px")
.style("left", event.offsetX + "px")
.style("visibility", "visible")
.html(tipHtml);
}
function hideLinkTip() {
tooltip.value.style("visibility", "hidden");
}
watch( watch(
() => networkProfilingStore.nodes, () => networkProfilingStore.nodes,
() => { () => {
@ -519,5 +547,9 @@ watch(
#tooltip { #tooltip {
position: absolute; position: absolute;
visibility: hidden; visibility: hidden;
padding: 5px;
border: 1px solid #000;
border-radius: 5px;
background-color: #fff;
} }
</style> </style>