Introduce dashboard page in dashboard web ui

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

@@ -53,6 +53,7 @@
 public class Dashboard {
 
   private static final Logger LOG = LoggerFactory.getLogger(Dashboard.class);
+  private final long startTimeMs;
 
   private DashboardConf conf;
   // Jetty Server
@@ -62,6 +63,7 @@ public class Dashboard {
 
   public Dashboard(DashboardConf coordinatorConf) {
     this.conf = coordinatorConf;
+    this.startTimeMs = System.currentTimeMillis();
     initialization();
   }
 
@@ -120,6 +122,7 @@ private ServletContextHandler addProxyHandler(Map<String, String> coordinatorSer
     servletHolder.setInitParameter(
         ServerProperties.PROVIDER_PACKAGES, "org.apache.uniffle.dashboard.web.resource");
     contextHandler.setAttribute("coordinatorServerAddresses", coordinatorServerAddresses);
+    contextHandler.setAttribute(Dashboard.class.getCanonicalName(), this);
     return contextHandler;
   }
 
@@ -159,4 +162,8 @@ public void start() {
     }
     LOG.info("Dashboard http server started, listening on port {}", httpPort);
   }
+
+  public long getStartTimeMs() {
+    return startTimeMs;
+  }
 }

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

@@ -0,0 +1,55 @@
+/*
+ * 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.resource;
+
+import org.apache.hbase.thirdparty.javax.ws.rs.GET;
+import org.apache.hbase.thirdparty.javax.ws.rs.Path;
+import org.apache.hbase.thirdparty.javax.ws.rs.Produces;
+import org.apache.hbase.thirdparty.javax.ws.rs.core.Context;
+import org.apache.hbase.thirdparty.javax.ws.rs.core.MediaType;
+import org.apache.uniffle.common.util.Constants;
+import org.apache.uniffle.common.web.resource.BaseResource;
+import org.apache.uniffle.common.web.resource.Response;
+import org.apache.uniffle.dashboard.web.Dashboard;
+
+import javax.servlet.ServletContext;
+import java.util.HashMap;
+import java.util.Map;
+
+@Produces({MediaType.APPLICATION_JSON})
+public class DashboardResource extends BaseResource {
+
+  @Context protected ServletContext servletContext;
+
+  @GET
+  @Path("/info")
+  public Response<Map<String, Object>> getDashboardInfo() {
+    return execute(
+        () -> {
+          Map<String, Object> dashboardInfo = new HashMap<>();
+          dashboardInfo.put("version", Constants.VERSION_AND_REVISION_SHORT);
+          dashboardInfo.put("startTime", getDashboard().getStartTimeMs());
+          return dashboardInfo;
+        });
+  }
+
+  private Dashboard getDashboard() {
+    return (Dashboard)
+        servletContext.getAttribute(Dashboard.class.getCanonicalName());
+  }
+}

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

@@ -28,4 +28,9 @@ public class WebResource {
   public Class<CoordinatorResource> getGainCoordinatorsResource() {
     return CoordinatorResource.class;
   }
+
+  @Path("dashboard")
+  public Class<DashboardResource> getDashboardResource() {
+    return DashboardResource.class;
+  }
 }

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

@@ -16,6 +16,11 @@
  */
 
 import http from '@/utils/http'
+// Create a Dashboard information interface
+export function getDashboardInfo(params, headers) {
+  return http.get('/dashboard/info', 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/components/LayoutPage.vue

@@ -36,6 +36,10 @@
                   <img src="../assets/uniffle-logo.png" alt="unffile" />
                 </div>
               </el-menu-item>
+              <el-menu-item index="/dashboardpage">
+                <el-icon><House /></el-icon>
+                <span>Dashboard</span>
+              </el-menu-item>
               <el-menu-item index="/coordinatorserverpage">
                 <el-icon><House /></el-icon>
                 <span>Coordinator</span>

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

@@ -0,0 +1,120 @@
+<!--
+  ~ 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.
+  -->
+
+<template>
+  <div class="demo-collapse">
+    <el-collapse v-model="pageData.activeNames" accordion:false>
+      <el-collapse-item title="Dashboard" name="1">
+        <div>
+          <el-descriptions class="margin-top" :column="3" :size="size" border>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  <el-icon :style="iconStyle">
+                    <Wallet />
+                  </el-icon>
+                  Version
+                </div>
+              </template>
+              {{ pageData.dashboardInfo.version}}
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  <el-icon :style="iconStyle">
+                    <Wallet />
+                  </el-icon>
+                  Start Time
+                </div>
+              </template>
+              <template #default>
+                {{ dateFormatter(null, null, pageData.dashboardInfo.startTime) }}
+              </template>
+            </el-descriptions-item>
+          </el-descriptions>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script>
+import { ref, reactive, computed, onMounted } from 'vue'
+import {
+  getDashboardInfo
+} from '@/api/api'
+import { dateFormatter } from '@/utils/common'
+
+export default {
+  setup() {
+    const pageData = reactive({
+      activeNames: ['1', '2'],
+      tableData: [],
+      dashboardInfo: {}
+    })
+
+    async function getDbInfo() {
+      const res = await getDashboardInfo()
+      pageData.dashboardInfo = res.data.data
+    }
+
+    onMounted(() => {
+      getDbInfo()
+    })
+
+    const size = ref('')
+    const iconStyle = computed(() => {
+      const marginMap = {
+        large: '8px',
+        default: '6px',
+        small: '4px'
+      }
+      return {
+        marginRight: marginMap[size.value] || marginMap.default
+      }
+    })
+    const blockMargin = computed(() => {
+      const marginMap = {
+        large: '32px',
+        default: '28px',
+        small: '24px'
+      }
+      return {
+        marginTop: marginMap[size.value] || marginMap.default
+      }
+    })
+
+    return {
+      pageData,
+      iconStyle,
+      blockMargin,
+      size,
+      dateFormatter
+    }
+  }
+}
+</script>
+<style>
+.cell-item {
+  display: flex;
+  align-items: center;
+}
+
+.margin-top {
+  margin-top: 20px;
+}
+</style>

dashboard/src/main/webapp/src/router/index.js

@@ -17,12 +17,18 @@
 
 import { createRouter, createWebHashHistory } from 'vue-router'
 import ApplicationPage from '@/pages/ApplicationPage.vue'
+import DashboardPage from '@/pages/DashboardPage.vue'
 import CoordinatorServerPage from '@/pages/CoordinatorServerPage.vue'
 import ShuffleServerPage from '@/pages/ShuffleServerPage.vue'
 import ExcludeNodeList from '@/pages/serverstatus/ExcludeNodeList'
 import NodeListPage from '@/pages/serverstatus/NodeListPage.vue'
 
 const routes = [
+  {
+    path: '/dashboardpage',
+    name: 'dashboardpage',
+    component: DashboardPage
+  },
   {
     path: '/coordinatorserverpage',
     name: 'coordinatorserverpage',