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

fix: polish tooltips for trace profiling widget (#251)

Browse Source
This commit is contained in:
Fine0830 2023-04-02 20:52:25 +08:00 committed by GitHub
parent 55e4828adc
commit 0e15c023cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,14 +17,14 @@ limitations under the License. -->
<div v-if="type === 'statistics'"> <div v-if="type === 'statistics'">
<div class="trace-item"> <div class="trace-item">
<div :class="['method']"> <div :class="['method']">
<el-tooltip :content="data.groupRef.endpointName" placement="bottom"> <el-tooltip :content="data.groupRef.endpointName" placement="bottom" :show-after="300">
<span> <span>
{{ data.groupRef.endpointName }} {{ data.groupRef.endpointName }}
</span> </span>
</el-tooltip> </el-tooltip>
</div> </div>
<div :class="['type']"> <div :class="['type']">
<el-tooltip :content="data.groupRef.type" placement="bottom"> <el-tooltip :content="data.groupRef.type" placement="bottom" :show-after="300">
<span> <span>
{{ data.groupRef.type }} {{ data.groupRef.type }}
</span> </span>
@ -76,22 +76,22 @@ limitations under the License. -->
<el-tooltip <el-tooltip
:content="data.type === 'Entry' ? 'Entry' : 'Exit'" :content="data.type === 'Entry' ? 'Entry' : 'Exit'"
placement="bottom" placement="bottom"
:show-after="300"
v-if="['Entry', 'Exit'].includes(data.type)" v-if="['Entry', 'Exit'].includes(data.type)"
> >
<span> <span>
<Icon :iconName="data.type === 'Entry' ? 'entry' : 'exit'" size="sm" class="mr-5" /> <Icon :iconName="data.type === 'Entry' ? 'entry' : 'exit'" size="sm" class="mr-5" />
</span> </span>
</el-tooltip> </el-tooltip>
<el-tooltip v-if="isCrossThread" content="CROSS_THREAD" placement="bottom"> <el-tooltip v-if="isCrossThread" content="CROSS_THREAD" placement="bottom" :show-after="300">
<span> <span>
<Icon iconName="cross" size="sm" class="mr-5" /> <Icon iconName="cross" size="sm" class="mr-5" />
</span> </span>
</el-tooltip> </el-tooltip>
<el-tooltip :content="data.endpointName" placement="bottom"> <el-tooltip :content="data.endpointName" placement="bottom" :show-after="300">
<span> <span>
{{ data.endpointName }} {{ data.endpointName }}
</span> </span>
<span v-if="data.profiled === false"></span>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="start-time"> <div class="start-time">
@ -109,12 +109,12 @@ limitations under the License. -->
{{ data.dur ? data.dur + "" : "0" }} {{ data.dur ? data.dur + "" : "0" }}
</div> </div>
<div class="api"> <div class="api">
<el-tooltip :content="data.component || '-'" placement="bottom"> <el-tooltip :show-after="300" :content="data.component || '-'" placement="bottom">
<span>{{ data.component || "-" }}</span> <span>{{ data.component || "-" }}</span>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="application"> <div class="application">
<el-tooltip :content="data.serviceCode || '-'" placement="bottom"> <el-tooltip :show-after="300" :content="data.serviceCode || '-'" placement="bottom">
<span>{{ data.serviceCode }}</span> <span>{{ data.serviceCode }}</span>
</el-tooltip> </el-tooltip>
</div> </div>

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

@ -141,13 +141,13 @@ export default class ListGraph {
.attr("class", "trace-node") .attr("class", "trace-node")
.attr("style", "cursor: pointer") .attr("style", "cursor: pointer")
.style("opacity", 0) .style("opacity", 0)
.on("mouseover", function (event: any, d: Trace) { .on("mouseover", function (event: MouseEvent, d: Trace) {
t.tip.show(d, this); t.tip.show(d, this);
}) })
.on("mouseout", function (event: any, d: Trace) { .on("mouseout", function (event: MouseEvent, d: Trace) {
t.tip.hide(d, this); t.tip.hide(d, this);
}) })
.on("click", (event: any, d: Trace) => { .on("click", (event: MouseEvent, d: Trace) => {
if (this.handleSelectSpan) { if (this.handleSelectSpan) {
this.handleSelectSpan(d); this.handleSelectSpan(d);
} }