From f71337c7df4ecea28bf49bd3877c4c45be0590b4 Mon Sep 17 00:00:00 2001
From: rick <LinuxSuRen@users.noreply.github.com>
Date: Wed, 30 Apr 2025 09:09:30 +0000
Subject: [PATCH] feat: improve the ui for the larget content view on data mgr

---
 console/atest-ui/src/views/DataManager.vue    | 46 ++++++++++++++++---
 .../content/zh/latest/tasks/grpc-manual.md    |  2 +-
 2 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/console/atest-ui/src/views/DataManager.vue b/console/atest-ui/src/views/DataManager.vue
index 810af010..8e40d94e 100644
--- a/console/atest-ui/src/views/DataManager.vue
+++ b/console/atest-ui/src/views/DataManager.vue
@@ -24,9 +24,12 @@ const queryResultAsJSON = ref('')
 const columns = ref([] as string[])
 const queryTip = ref('')
 const loadingStores = ref(true)
+const showOverflowTooltip = ref(true)
 const dataFormat = ref('table')
 const dataFormatOptions = ['table', 'json']
 const queryDataMeta = ref({} as QueryDataMeta)
+const largeContent = ref('')
+const largeContentDialogVisible = ref(false)
 
 interface TreeItem {
     label: string
@@ -140,22 +143,28 @@ const ormDataHandler = (data: QueryData) => {
         result.push(obj)
     })
 
+    columns.value = [] as string[]
     data.meta.labels = data.meta.labels.filter((item) => {
         if (item.key === '_native_sql') {
             sqlQuery.value = item.value
             return false
         }
+        if (item.key === '_columns') {
+            columns.value = JSON.parse(item.value)
+        }
         return !item.key.startsWith('_')
     })
 
     queryDataMeta.value = data.meta
     queryResult.value = result
     queryResultAsJSON.value = JSON.stringify(result, null, 2)
-    columns.value = Array.from(cols).sort((a, b) => {
-        if (a === 'id') return -1;
-        if (b === 'id') return 1;
-        return a.localeCompare(b);
-    })
+    if (columns.value.length == 0) {
+        columns.value = Array.from(cols).sort((a, b) => {
+            if (a === 'id') return -1;
+            if (b === 'id') return 1;
+            return a.localeCompare(b);
+        })
+    }
 
     tablesTree.value = []
     queryDataMeta.value.tables.forEach((i) => {
@@ -231,6 +240,19 @@ const nextPage = () => {
     query.value.offset += query.value.limit
     executeQuery()
 }
+const overflowChange = () => {
+    showOverflowTooltip.value = !showOverflowTooltip.value
+}
+const tryShowPrettyJSON = (row: any, column: any, cell: HTMLTableCellElement, event: Event) => {
+    const cellValue = row[column.rawColumnKey]
+    const obj = JSON.parse(cellValue)
+    if (obj) {
+        largeContent.value = JSON.stringify(obj, null, 2)
+    }
+}
+watch(largeContent, (e) => {
+    largeContentDialogVisible.value = e !== ''
+})
 </script>
 
 <template>
@@ -312,15 +334,25 @@ const nextPage = () => {
                         <el-tag type="primary" v-if="queryResult.length > 0">{{ queryResult.length }} rows</el-tag>
                         <el-tag type="primary" v-if="queryDataMeta.duration">{{ queryDataMeta.duration }}</el-tag>
                         <el-tag type="primary" v-for="label in queryDataMeta.labels">{{ label.value }}</el-tag>
+                        <el-check-tag type="primary" :checked="showOverflowTooltip" @change="overflowChange" v-if="queryResult.length > 0">overflow</el-check-tag>
                     </div>
-                    <el-table :data="queryResult" stripe v-if="dataFormat === 'table'" height="calc(100vh - 200px)">
-                        <el-table-column v-for="col in columns" :key="col" :prop="col" :label="col" sortable />
+                    <el-table :data="queryResult" stripe v-if="dataFormat === 'table'" height="calc(100vh - 200px)" @cell-dblclick="tryShowPrettyJSON">
+                        <el-table-column v-for="col in columns" :key="col" :prop="col" :label="col" sortable :show-overflow-tooltip="showOverflowTooltip" />
                     </el-table>
                     <Codemirror v-else-if="dataFormat === 'json'" v-model="queryResultAsJSON" />
                 </el-main>
             </el-container>
         </el-container>
     </div>
+
+    <el-dialog
+        v-model="largeContentDialogVisible"
+        destroy-on-close
+        @closed="largeContent=''"
+        center
+    >
+        <Codemirror v-model="largeContent" />
+    </el-dialog>
 </template>
 
 <style>
diff --git a/docs/site/content/zh/latest/tasks/grpc-manual.md b/docs/site/content/zh/latest/tasks/grpc-manual.md
index 1ddf717d..f1534c48 100644
--- a/docs/site/content/zh/latest/tasks/grpc-manual.md
+++ b/docs/site/content/zh/latest/tasks/grpc-manual.md
@@ -117,4 +117,4 @@ expect:
 
 请注意，对于服务端流和双向流模式，服务器发送多条消息的情况下，此处的`data`字段内的填写的目标数组，需同时满足与待验证数组长度相，两个数组同一下标的内容完全相同。
 
-`gRPC API`的`verify`功能与`HTTP API`保持一致，此处不再赘述。
\ No newline at end of file
+`gRPC API`的`verify`功能与`HTTP API`保持一致，此处不再赘述。