feat: add a title and a description for trace segments (#332)

.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 }}

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;

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;

src/locales/lang/zh.ts

@@ -380,5 +380,7 @@ const msg = {
   addExpressions: "添加表达式",
   expressions: "表达式",
   unhealthyExpression: "非健康表达式",
+  traceDesc:
+    "Trace Segment代表在单一操作系统进程（例如JVM）中执行的追踪部分。它包含了一组跨度（spans），这些跨度通常与单一请求或执行上下文关联。",
 };
 export default msg;

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
+      <div class="title">
-        v-model="traceStore.conditions.paging.pageNum"
+        <span class="mr-5">Trace Segments</span>
-        :page-size="pageSize"
+        <el-popover
-        :small="true"
+          :width="310"
-        layout="prev, pager, next"
+          placement="right"
-        :pager-count="5"
+          :content="t('traceDesc')"
-        :total="total"
+          :popper-style="{ 'word-break': 'keep-all', 'word-wrap': 'break-word' }"
-        @current-change="updatePage"
+        >
-      />
+          <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
+    traceStore.traceList.length === pageSize
-      ? pageSize.value * traceStore.conditions.paging.pageNum + 1
+      ? pageSize * traceStore.conditions.paging.pageNum + 1
-      : pageSize.value * traceStore.conditions.paging.pageNum,
+      : 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 {