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

feat: add tips

Browse Source
This commit is contained in:
Fine 2023-03-30 09:39:06 +08:00
parent 167ca79f07
commit b5565e89c3
2 changed files with 52 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/views/dashboard/related/trace/components/Table/TableItem.vue
View File

@ -73,13 +73,20 @@ limitations under the License. -->
size="sm"
class="mr-5"
/>
<Icon
<el-tooltip
:content="data.type === 'Entry' ? 'Entry' : 'Exit'"
placement="bottom"
v-if="['Entry', 'Exit'].includes(data.type)"
:iconName="data.type === 'Entry' ? 'entry' : 'exit'"
size="sm"
class="mr-5"
/>
<Icon v-if="isCrossThread" iconName="cross" size="sm" class="mr-5" />
>
<span>
<Icon :iconName="data.type === 'Entry' ? 'entry' : 'exit'" size="sm" class="mr-5" />
</span>
</el-tooltip>
<el-tooltip v-if="isCrossThread" content="CROSS_THREAD" placement="bottom">
<span>
<Icon iconName="cross" size="sm" class="mr-5" />
</span>
</el-tooltip>
<el-tooltip :content="data.endpointName" placement="bottom">
<span>
{{ data.endpointName }}

40
src/views/dashboard/related/trace/utils/d3-trace-list.ts
View File

@ -30,6 +30,7 @@ export default class ListGraph {
private height = 0;
private svg: any = null;
private tip: any = null;
private prompt: any = null;
private row: any[] = [];
private data: any = [];
private min = 0;
@ -65,7 +66,14 @@ export default class ListGraph {
}
`;
});
this.prompt = (d3tip as any)()
.attr("class", "d3-tip")
.offset([-8, 0])
.html((d: any) => {
return `<div class="mb-5">${d.data.type}</div>`;
});
this.svg.call(this.tip);
this.svg.call(this.prompt);
}
diagonal(d: any) {
return `M ${d.source.y} ${d.source.x + 5}
@ -161,7 +169,18 @@ export default class ListGraph {
.attr("y", -10)
.attr("xlink:href", (d: any) =>
d.data.type === "Entry" ? icons.ENTRY : d.data.type === "Exit" ? icons.EXIT : "",
);
)
.style("display", (d: any) => {
["Entry", "Exit"].includes(d.data.type) ? "inline" : "none";
})
.on("mouseover", function (event: any, d: Trace) {
event.stopPropagation();
t.prompt.show(d, this);
})
.on("mouseout", function (event: any, d: Trace) {
event.stopPropagation();
t.prompt.hide(d, this);
});
nodeEnter
.append("image")
.attr("width", 16)
@ -171,6 +190,25 @@ export default class ListGraph {
.attr("xlink:href", (d: any) => {
const key = (d.data.refs || []).findIndex((d: { type: string }) => d.type === "CROSS_THREAD");
return key > -1 ? icons.STREAM : "";
})
.style("display", (d: any) => {
const key = (d.data.refs || []).findIndex((d: { type: string }) => d.type === "CROSS_THREAD");
return key > -1 ? "inline" : "none";
})
.on("mouseover", function (event: any, d: any) {
const a = {
...d,
data: {
...d.data,
type: "CROSS_THREAD",
},
};
event.stopPropagation();
t.prompt.show(a, this);
})
.on("mouseout", function (event: any, d: Trace) {
event.stopPropagation();
t.prompt.hide(d, this);
});
nodeEnter
.append("text")