Add config table to dashboardPage

dashboard/pom.xml

@@ -37,6 +37,10 @@
             <groupId>org.apache.uniffle</groupId>
             <artifactId>rss-server-common</artifactId>
         </dependency>
+        <dependency>
+            <groupId>org.projectlombok</groupId>
+            <artifactId>lombok</artifactId>
+        </dependency>
     </dependencies>
 
     <build>

dashboard/src/main/java/org/apache/uniffle/dashboard/web/Dashboard.java

@@ -166,4 +166,8 @@ public void start() {
   public long getStartTimeMs() {
     return startTimeMs;
   }
+
+  public DashboardConf getConf() {
+    return conf;
+  }
 }

dashboard/src/main/java/org/apache/uniffle/dashboard/web/lombok.config

@@ -0,0 +1,21 @@
+#
+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to You under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+#    http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+clear lombok.allArgsConstructor.flagUsage
+clear lombok.anyConstructor.flagUsage
+clear lombok.noArgsConstructor.flagUsage
+clear lombok.data.flagUsage
+clear lombok.builder.flagUsage

dashboard/src/main/java/org/apache/uniffle/dashboard/web/resource/DashboardResource.java

@@ -17,8 +17,11 @@
 
 package org.apache.uniffle.dashboard.web.resource;
 
+import java.util.ArrayList;
 import java.util.HashMap;
+import java.util.List;
 import java.util.Map;
+import java.util.Set;
 import javax.servlet.ServletContext;
 
 import org.apache.hbase.thirdparty.javax.ws.rs.GET;
@@ -31,12 +34,32 @@
 import org.apache.uniffle.common.web.resource.BaseResource;
 import org.apache.uniffle.common.web.resource.Response;
 import org.apache.uniffle.dashboard.web.Dashboard;
+import org.apache.uniffle.dashboard.web.config.DashboardConf;
+import org.apache.uniffle.dashboard.web.vo.DashboardConfVO;
 
 @Produces({MediaType.APPLICATION_JSON})
 public class DashboardResource extends BaseResource {
 
   @Context protected ServletContext servletContext;
 
+  @GET
+  @Path("/conf")
+  public Response<List<DashboardConfVO>> getDashboardConf() {
+    return execute(
+        () -> {
+          DashboardConf conf = getDashboard().getConf();
+          Set<Map.Entry<String, Object>> allEntry = conf.getAll();
+          List<DashboardConfVO> dashboardConfVOs = new ArrayList<>();
+          for (Map.Entry<String, Object> stringObjectEntry : allEntry) {
+            DashboardConfVO result =
+                new DashboardConfVO(
+                    stringObjectEntry.getKey(), String.valueOf(stringObjectEntry.getValue()));
+            dashboardConfVOs.add(result);
+          }
+          return dashboardConfVOs;
+        });
+  }
+
   @GET
   @Path("/info")
   public Response<Map<String, Object>> getDashboardInfo() {

dashboard/src/main/java/org/apache/uniffle/dashboard/web/vo/DashboardConfVO.java

@@ -0,0 +1,28 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package org.apache.uniffle.dashboard.web.vo;
+
+import lombok.AllArgsConstructor;
+import lombok.Data;
+
+@Data
+@AllArgsConstructor
+public class DashboardConfVO {
+  private String argumentKey;
+  private String argumentValue;
+}

dashboard/src/main/webapp/src/api/api.js

@@ -21,6 +21,11 @@ export function getDashboardInfo(params, headers) {
   return http.get('/dashboard/info', params, headers, 1)
 }
 
+// Create a dashboard configuration file interface
+export function getDashboardConf(params, headers) {
+  return http.get('/dashboard/conf', params, headers, 1)
+}
+
 // Create a Coordinator information interface
 export function getCoordinatorServerInfo(params, headers) {
   return http.get('/coordinator/info', params, headers, 0)

dashboard/src/main/webapp/src/pages/DashboardPage.vue

@@ -48,13 +48,25 @@
           </el-descriptions>
         </div>
       </el-collapse-item>
+      <el-collapse-item title="Dashboard Properties" name="2">
+        <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" :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>
   </div>
 </template>
 
 <script>
 import { ref, reactive, computed, onMounted } from 'vue'
 import {
+  getDashboardConf,
   getDashboardInfo
 } from '@/api/api'
 import { dateFormatter } from '@/utils/common'
@@ -67,12 +79,17 @@ export default {
       dashboardInfo: {}
     })
 
+    async function getDbConfPage() {
+      const res = await getDashboardConf()
+      pageData.tableData = res.data.data
+    }
     async function getDbInfo() {
       const res = await getDashboardInfo()
       pageData.dashboardInfo = res.data.data
     }
 
     onMounted(() => {
+      getDbConfPage()
       getDbInfo()
     })
 
@@ -98,11 +115,28 @@ 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,
       blockMargin,
       size,
+      filteredTableData,
+      searchKeyword,
       dateFormatter
     }
   }