(incubator-uniffle) branch master updated: [#1401] improvement(dashboard): Fixed distorted page display due to excessively long property values (#2009)

[rickyma]

This is an automated email from the ASF dual-hosted git repository.

rickyma pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-uniffle.git


The following commit(s) were added to refs/heads/master by this push:
     new 41389dfb0 [#1401] improvement(dashboard): Fixed distorted page display 
due to excessively long property values (#2009)
41389dfb0 is described below

commit 41389dfb05686768032364415bc1f74a1dfced9f
Author: yl09099 <33595968+yl09...@users.noreply.github.com>
AuthorDate: Sat Aug 3 14:34:16 2024 +0800

    [#1401] improvement(dashboard): Fixed distorted page display due to 
excessively long property values (#2009)
    
    ### What changes were proposed in this pull request?
    
    Fixed the property value is too long and the page display is distorted.
    1. If the content of the cell is too long, use ellipses to replace the 
excess.
    2. Provide bubbles to show everything.
    
    
![image](https://github.com/user-attachments/assets/83d4f962-03b7-4c15-82fd-070e7e875c8a)
    
![image](https://github.com/user-attachments/assets/a9c4add7-e461-4332-bbba-c8ca9c9d5740)
    
    ### Why are the changes needed?
    
    Fix: #1401
    
    ### Does this PR introduce _any_ user-facing change?
    
    Yes.
    
    ### How was this patch tested?
    
    Page display.
---
 .../main/webapp/src/mock/coordinatorserverpage.js  |  3 ++-
 .../webapp/src/pages/CoordinatorServerPage.vue     | 28 +++++++++++++++++++---
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/dashboard/src/main/webapp/src/mock/coordinatorserverpage.js 
b/dashboard/src/main/webapp/src/mock/coordinatorserverpage.js
index 561ceea2d..a25c41a09 100644
--- a/dashboard/src/main/webapp/src/mock/coordinatorserverpage.js
+++ b/dashboard/src/main/webapp/src/mock/coordinatorserverpage.js
@@ -280,7 +280,8 @@ Mock.mock(/\/coordinator\/conf/, 'get', {
     {
       argumentKey: 'java.class.version',
       argumentValue: '55.0'
-    }
+    },
+    
{'argumentKey':'java.class.path','argumentValue':':/root/rss-0.10.0-SNAPSHOT-hadoop2.8/jars/coordinator/activation-1.1.1.jar:/root/rss-0.10.0-SNAPSHOT-hadoop2.8/jars/coordinator/animal-sniffer-annotations-1.23.jar:/root/rss-0.10.0-SNAPSHOT-hadoop2.8/jars/coordinator/annotations-4.1.1.4.jar:/root/rss-0.10.0-SNAPSHOT-hadoop2.8/jars/coordinator/checker-qual-3.37.0.jar:/root/rss-0.10.0-SNAPSHOT-hadoop2.8/jars/coordinator/commons-collections4-4.4.jar:/root/rss-0.10.0-SNAPSHOT-hadoop2.8/ja
 [...]
   ],
   errMsg: 'success'
 })
diff --git a/dashboard/src/main/webapp/src/pages/CoordinatorServerPage.vue 
b/dashboard/src/main/webapp/src/pages/CoordinatorServerPage.vue
index fb82ad740..339f0bb6f 100644
--- a/dashboard/src/main/webapp/src/pages/CoordinatorServerPage.vue
+++ b/dashboard/src/main/webapp/src/pages/CoordinatorServerPage.vue
@@ -106,9 +106,14 @@
         </div>
       </el-collapse-item>
       <el-collapse-item title="Coordinator Properties" name="2">
-        <el-table :data="pageData.tableData" stripe style="width: 100%">
+        <el-table :data="filteredTableData" stripe style="width: 100%">
           <el-table-column prop="argumentKey" label="Name" min-width="380" />
-          <el-table-column prop="argumentValue" label="Value" min-width="380" 
/>
+          <el-table-column prop="argumentValue" label="Value" min-width="380" 
:show-overflow-tooltip="true" />
+          <el-table-column align="right">
+            <template #header>
+              <el-input v-model="searchKeyword" size="small" placeholder="Type 
to search" />
+            </template>
+          </el-table-column>
         </el-table>
       </el-collapse-item>
     </el-collapse>
@@ -225,6 +230,21 @@ export default {
       }
     })
 
+    /**
+     * The following describes how to handle blacklist select events.
+     */
+    const searchKeyword = ref('')
+    const filteredTableData = computed(() => {
+      const keyword = searchKeyword.value.trim()
+      if (!keyword) {
+        return pageData.tableData
+      } else {
+        return pageData.tableData.filter((row) => {
+          return row.argumentValue.includes(keyword) || 
row.argumentKey.includes(keyword)
+        })
+      }
+    })
+
     return {
       pageData,
       iconStyle,
@@ -232,7 +252,9 @@ export default {
       size,
       handlerMetrics,
       handlerPromMetrics,
-      handlerStacks
+      handlerStacks,
+      filteredTableData,
+      searchKeyword
     }
   }
 }