From d2eae879573ae657d230aea651de83432aace87c Mon Sep 17 00:00:00 2001
From: Fine0830 <fanxue0830@gmail.com>
Date: Mon, 23 Oct 2023 17:42:02 +0800
Subject: [PATCH] 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 +
 .../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 {