github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-06-17 10:47:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

add action box

Browse Source
This commit is contained in:
Fine 2025-04-14 11:33:29 +08:00
parent 319f9bbc30
commit 464827e8a1
4 changed files with 31 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/views/dashboard/related/trace/components/D3Graph/Index.vue
View File

@ -162,6 +162,9 @@ limitations under the License. -->
}
}
function viewParentSpan(span: Recordable) {
if (props.type === TraceGraphType.TABLE) {
return;
}
tree.value.highlightParents(span);
}
function traverseTree(node: Recordable, spanId: string, segmentId: string, data: Recordable) {

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

@ -11,7 +11,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div class="charts">
<div class="trace-table-charts">
<Graph :data="data" :traceId="traceId" :type="TraceGraphType.TABLE" :headerType="headerType" />
</div>
</template>
@ -29,10 +29,11 @@ limitations under the License. -->
});
</script>
<style lang="scss" scoped>
.charts {
.trace-table-charts {
overflow: auto;
padding: 10px;
height: 100%;
width: 100%;
position: relative;
}
</style>

20
src/views/dashboard/related/trace/components/Table/TableContainer.vue
View File

@ -47,7 +47,7 @@ limitations under the License. -->
:key="`key${index}`"
:type="type"
:headerType="headerType"
@click="selectItem()"
@click="selectItem"
/>
<slot></slot>
</div>
@ -104,8 +104,24 @@ limitations under the License. -->
};
};
});
function selectItem() {
function selectItem(event: MouseEvent) {
emits("select", traceStore.selectedSpan);
if (props.headerType === WidgetType.Profile) {
return;
}
if (props.type === TraceGraphType.STATISTICS) {
return;
}
const item: any = document.querySelector("#trace-action-box");
const tableBox = document.querySelector(".trace-table-charts")?.getBoundingClientRect();
if (!tableBox) {
return;
}
const offsetX = event.x - tableBox.x;
const offsetY = event.y - tableBox.y;
item.style.display = "block";
item.style.top = `${offsetY + 20}px`;
item.style.left = `${offsetX + 10}px`;
}
function sortStatistics(key: string) {
const element = props.tableData;

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

@ -17,14 +17,14 @@ limitations under the License. -->
<div v-if="type === TraceGraphType.STATISTICS">
<div class="trace-item">
<div :class="['method']">
<el-tooltip :content="data.groupRef.endpointName" placement="bottom" :show-after="300">
<el-tooltip :content="data.groupRef.endpointName" placement="top" :show-after="300">
<span>
{{ data.groupRef.endpointName }}
</span>
</el-tooltip>
</div>
<div :class="['type']">
<el-tooltip :content="data.groupRef.type" placement="bottom" :show-after="300">
<el-tooltip :content="data.groupRef.type" placement="top" :show-after="300">
<span>
{{ data.groupRef.type }}
</span>
@ -75,7 +75,7 @@ limitations under the License. -->
/>
<el-tooltip
:content="data.type === 'Entry' ? 'Entry' : 'Exit'"
placement="bottom"
placement="top"
:show-after="300"
v-if="['Entry', 'Exit'].includes(data.type)"
>
@ -83,12 +83,12 @@ limitations under the License. -->
<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" :show-after="300">
<el-tooltip v-if="isCrossThread" content="CROSS_THREAD" placement="top" :show-after="300">
<span>
<Icon iconName="cross" size="sm" class="mr-5" />
</span>
</el-tooltip>
<el-tooltip :content="data.endpointName" placement="bottom" :show-after="300">
<el-tooltip :content="data.endpointName" placement="top" :show-after="300">
<span>
{{ data.endpointName }}
</span>
@ -109,12 +109,12 @@ limitations under the License. -->
{{ data.dur ? data.dur + "" : "0" }}
</div>
<div class="api">
<el-tooltip :show-after="300" :content="data.component || '-'" placement="bottom">
<el-tooltip :show-after="300" :content="data.component || '-'" placement="top">
<span>{{ data.component || "-" }}</span>
</el-tooltip>
</div>
<div class="application">
<el-tooltip :show-after="300" :content="data.serviceCode || '-'" placement="bottom">
<el-tooltip :show-after="300" :content="data.serviceCode || '-'" placement="top">
<span>{{ data.serviceCode }}</span>
</el-tooltip>
</div>
@ -284,8 +284,6 @@ limitations under the License. -->
}
.trace-item.level0 {
color: #448dfe;
&:hover {
background: rgb(0 0 0 / 4%);
}