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

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

View File

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

View File

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