This is an automated email from the ASF dual-hosted git repository.
qiuxiafan pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
The following commit(s) were added to refs/heads/main by this push:
new d2eae879 feat: add a title and a description for trace segments (#332)
d2eae879 is described below
commit d2eae879573ae657d230aea651de83432aace87c
Author: Fine0830 <fanxue0...@gmail.com>
AuthorDate: Mon Oct 23 17:42:02 2023 +0800
feat: add a title and a description for trace segments (#332)
---
.github/workflows/nodejs.yml | 2 +-
src/locales/lang/en.ts | 2 +
src/locales/lang/es.ts | 2 +
src/locales/lang/zh.ts | 2 +
src/views/dashboard/related/trace/TraceList.vue | 52 ++++++++++++++++++-------
5 files changed, 44 insertions(+), 16 deletions(-)
diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
index 3003504b..4f7f664d 100644
--- a/.github/workflows/nodejs.yml
+++ b/.github/workflows/nodejs.yml
@@ -37,7 +37,7 @@ jobs:
runs-on: ubuntu-latest
strategy:
matrix:
- node-version: [14.x, 16.x, 18.x]
+ node-version: [16.x, 18.x, 20.x]
steps:
- uses: actions/checkout@v1
- name: Use Node.js ${{ matrix.node-version }}
diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 1d983f65..415a4735 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -382,5 +382,7 @@ const msg = {
addExpressions: "Add Expressions",
expressions: "Expression",
unhealthyExpression: "Unhealthy Expression",
+ traceDesc:
+ "The trace segment serves as a representation of a trace portion executed
within one single OS process, such as a JVM. It comprises a collection of
spans, typically associated with and collected from a single request or
execution context.",
};
export default msg;
diff --git a/src/locales/lang/es.ts b/src/locales/lang/es.ts
index b92ba40b..27860e0d 100644
--- a/src/locales/lang/es.ts
+++ b/src/locales/lang/es.ts
@@ -382,5 +382,7 @@ const msg = {
addExpressions: "Add Expressions",
expressions: "Expression",
unhealthyExpression: "Unhealthy Expression",
+ traceDesc:
+ "The trace segment serves as a representation of a trace portion executed
within one single OS process, such as a JVM. It comprises a collection of
spans, typically associated with and collected from a single request or
execution context.",
};
export default msg;
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index edc9a665..b9a6c48d 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -380,5 +380,7 @@ const msg = {
addExpressions: "添加表达式",
expressions: "表达式",
unhealthyExpression: "非健康表达式",
+ traceDesc:
+ "Trace
Segment代表在单一操作系统进程（例如JVM）中执行的追踪部分。它包含了一组跨度（spans），这些跨度通常与单一请求或执行上下文关联。",
};
export default msg;
diff --git a/src/views/dashboard/related/trace/TraceList.vue
b/src/views/dashboard/related/trace/TraceList.vue
index c2ebfe10..9be3d2ac 100644
--- a/src/views/dashboard/related/trace/TraceList.vue
+++ b/src/views/dashboard/related/trace/TraceList.vue
@@ -13,15 +13,21 @@ limitations under the License. -->
<template>
<div class="trace-t flex-v">
<div class="trace-t-tool flex-h">
- <el-pagination
- v-model="traceStore.conditions.paging.pageNum"
- :page-size="pageSize"
- :small="true"
- layout="prev, pager, next"
- :pager-count="5"
- :total="total"
- @current-change="updatePage"
- />
+ <div class="title">
+ <span class="mr-5">Trace Segments</span>
+ <el-popover
+ :width="310"
+ placement="right"
+ :content="t('traceDesc')"
+ :popper-style="{ 'word-break': 'keep-all', 'word-wrap': 'break-word'
}"
+ >
+ <template #reference>
+ <span class="cp">
+ <Icon iconName="info_outline" size="small" />
+ </span>
+ </template>
+ </el-popover>
+ </div>
<div class="selectors">
<Selector
size="small"
@@ -61,6 +67,16 @@ limitations under the License. -->
</table>
<div class="no-data" v-else>{{ t("noData") }}</div>
</div>
+ <div class="trace-t-tool flex-h">
+ <el-pagination
+ v-model="traceStore.conditions.paging.pageNum"
+ :page-size="pageSize"
+ :small="true"
+ layout="prev, pager, next"
+ :total="total"
+ @current-change="updatePage"
+ />
+ </div>
</div>
</template>
@@ -78,11 +94,11 @@ limitations under the License. -->
const traceStore = useTraceStore();
const loading = ref<boolean>(false);
const selectedKey = ref<string>("");
- const pageSize = ref<number>(20);
+ const pageSize = 20;
const total = computed(() =>
- traceStore.traceList.length === pageSize.value
- ? pageSize.value * traceStore.conditions.paging.pageNum + 1
- : pageSize.value * traceStore.conditions.paging.pageNum,
+ traceStore.traceList.length === pageSize
+ ? pageSize * traceStore.conditions.paging.pageNum + 1
+ : pageSize * traceStore.conditions.paging.pageNum,
);
function searchTrace() {
@@ -93,7 +109,7 @@ limitations under the License. -->
function updatePage(p: number) {
traceStore.setTraceCondition({
- paging: { pageNum: p, pageSize: pageSize.value },
+ paging: { pageNum: p, pageSize },
});
searchTrace();
}
@@ -101,7 +117,7 @@ limitations under the License. -->
function changeSort(opt: Option[]) {
traceStore.setTraceCondition({
queryOrder: opt[0].value,
- paging: { pageNum: 1, pageSize: pageSize.value },
+ paging: { pageNum: 1, pageSize },
});
searchTrace();
}
@@ -133,6 +149,12 @@ limitations under the License. -->
border-bottom: 1px solid #c1c5ca41;
border-right: 1px solid #c1c5ca41;
height: 35px;
+ align-items: center;
+ }
+
+ .title {
+ font-weight: bold;
+ padding-left: 10px;
}
.selectors {
