From 029260a3140da077c07f52dbc635729ef0691e63 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Mon, 23 Oct 2023 16:37:58 +0800
Subject: [PATCH] feat: add info and title on trace widget

---
 src/locales/lang/en.ts                        |  2 ++
 src/locales/lang/es.ts                        |  2 ++
 src/locales/lang/zh.ts                        |  2 ++
 .../dashboard/related/trace/TraceList.vue     | 36 ++++++++++++++-----
 4 files changed, 33 insertions(+), 9 deletions(-)

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..be67829a 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）中执行的跟踪部分的表示。它包括跨度的集合，通常与单个请求或执行上下文相关联并从中收集。",
 };
 export default msg;
diff --git a/src/views/dashboard/related/trace/TraceList.vue b/src/views/dashboard/related/trace/TraceList.vue
index c2ebfe10..f290ab40 100644
--- a/src/views/dashboard/related/trace/TraceList.vue
+++ b/src/views/dashboard/related/trace/TraceList.vue
@@ -13,15 +13,16 @@ 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 trigger="hover" width="250" placement="bottom" effect="light" :content="t('traceDesc')">
+          <template #reference>
+            <span>
+              <Icon iconName="info_outline" size="small" />
+            </span>
+          </template>
+        </el-popover>
+      </div>
       <div class="selectors">
         <Selector
           size="small"
@@ -61,6 +62,17 @@ 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"
+        :pager-count="5"
+        :total="total"
+        @current-change="updatePage"
+      />
+    </div>
   </div>
 </template>
 
@@ -133,6 +145,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 {