chore: build dashboard in Dockerfile (#12421)

Makefile.toml

@@ -364,7 +364,7 @@ alias = "build-risingwave"
 private = true
 category = "RiseDev - Build"
 description = "Extract dashboard artifact"
-condition = { env_not_set = ["ENABLE_BUILD_DASHBOARD_V2"] }
+condition = { env_not_set = ["ENABLE_BUILD_DASHBOARD"] }
 script = '''
 #!/usr/bin/env bash
 
@@ -377,11 +377,19 @@ git worktree prune
 git worktree add "${PREFIX_UI}" origin/dashboard-artifact
 '''
 
-[tasks.export-dashboard-v2]
+[tasks.export-dashboard]
 private = true
 category = "RiseDev - Build"
-description = "Build dashboard v2"
-condition = { env_set = ["ENABLE_BUILD_DASHBOARD_V2"] }
+description = "Build dashboard"
+condition = { env_set = [
+  "ENABLE_BUILD_DASHBOARD",
+], files_modified = { input = [
+  "./dashboard/**/*.js",
+  "./dashboard/package.json",
+  "./dashboard/next.config.js",
+], output = [
+  "./dashboard/out/**/*.html",
+] } }
 script = """
 #!/usr/bin/env bash
 set -e
@@ -523,7 +531,7 @@ dependencies = [
   "build-connector-node",
   "post-build-risingwave",
   "extract-dashboard-artifact",
-  "export-dashboard-v2",
+  "export-dashboard",
   "prepare-config",
 ]
 

dashboard/README.md

@@ -28,7 +28,7 @@ TODO: Find a suitable testing framework
 
 ## Development
 
-Start the RisingWave database, remove drop tables from `tpch_snapshot.slt`
+Start the RisingWave database, and create tables by removing drop tables from `tpch_snapshot.slt`
 
 ```bash
 ./risedev d
@@ -41,7 +41,7 @@ Install Dependencies.
 npm i
 ```
 
-The website will be served at port 3000.
+The website will be served at port 3000. It requests data from the mock server at port 32333.
 
 ```bash
 npm run dev
@@ -50,20 +50,23 @@ npm run dev
 You should also run:
 
 ```bash
+./mock/fetch.sh # dump current data from RisingWave meta node to be used by mock server
 node mock-server.js
 ```
 
-To start a mock API server when developing. You can use `fetch.sh` to update the mock APIs.
+To start a mock API server when developing.
 
 ## Test with RisingWave meta node
 
 To replace the built static files in RisingWave with your newest code,
 run the following scripts in the root directory.
 
 ```bash
-./risedev export-dashboard-v2
+./risedev export-dashboard
 ```
 
+The dashboard will be served by meta node at port 5691.
+
 ## Deployment
 
 ### Generate the protos
@@ -79,11 +82,4 @@ Check more details at [Static HTML Export](https://nextjs.org/docs/advanced-feat
 npm run build-static
 ```
 
-#### Next.js app
-
-The built files are generated at `./.next`.
-
-```bash
-npm run build
-npm run start
-```
+The built files are generated at `./out`.

dashboard/mock/fetch.sh

@@ -2,6 +2,9 @@
 
 set -e
 
+cd "$(dirname "$0")"
+
+set -v
 curl http://localhost:5691/api/actors > actors.json
 curl http://localhost:5691/api/clusters/0 > cluster_0.json
 curl http://localhost:5691/api/clusters/1 > cluster_1.json

dashboard/next.config.js

@@ -15,17 +15,20 @@
  *
  */
 
-module.exports = () => {
-  const rewrites = () => {
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  trailingSlash: true,
+
+  rewrites: () => {
     return [
       {
         source: "/api/:path*",
         destination: "http://localhost:32333/:path*",
       },
     ]
-  }
-  return {
-    rewrites,
-    trailingSlash: true,
-  }
+  },
 }
+
+module.exports = nextConfig

docker/Dockerfile

@@ -5,6 +5,18 @@ ENV LANG en_US.utf8
 RUN apt-get update \
   && apt-get -y install ca-certificates build-essential libsasl2-dev openjdk-11-jdk
 
+FROM base AS dashboard-builder
+
+RUN apt-get install -y curl gnupg protobuf-compiler && mkdir -p /etc/apt/keyrings \
+  && curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg \
+  && echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_18.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list \
+  && apt-get update && apt-get install -y nodejs
+
+COPY ./dashboard/ /risingwave/dashboard
+COPY ./proto  /risingwave/proto
+
+RUN cd /risingwave/dashboard && npm i && npm run build-static && rm -rf node_modules
+
 FROM base AS builder
 
 RUN apt-get update && apt-get -y install make cmake protobuf-compiler curl bash lld maven unzip
@@ -26,9 +38,6 @@ ENV IN_CONTAINER=1
 ARG GIT_SHA
 ENV GIT_SHA=$GIT_SHA
 
-RUN curl -LO https://github.com/risingwavelabs/risingwave/archive/refs/heads/dashboard-artifact.zip
-RUN unzip dashboard-artifact.zip && mv risingwave-dashboard-artifact /risingwave/ui && rm dashboard-artifact.zip
-
 # We need to add the `rustfmt` dependency, otherwise `risingwave_pb` will not compile
 RUN rustup self update \
   && rustup set profile minimal \
@@ -60,7 +69,7 @@ RUN mkdir -p /risingwave/bin/connector-node && mkdir -p /risingwave/lib
 COPY --from=builder /risingwave/bin/risingwave /risingwave/bin/risingwave
 COPY --from=builder /risingwave/bin/risingwave.dwp /risingwave/bin/risingwave.dwp
 COPY --from=builder /risingwave/bin/connector-node /risingwave/bin/connector-node
-COPY --from=builder /risingwave/ui /risingwave/ui
+COPY --from=dashboard-builder /risingwave/dashboard/out /risingwave/ui
 COPY --from=builder /risingwave/bin/jeprof /usr/local/bin/jeprof
 
 # Set default playground mode to docker-playground profile

docs/developer-guide.md

@@ -24,8 +24,6 @@ http://ecotrust-canada.github.io/markdown-toc/
   * [Start the playground with cargo](#start-the-playground-with-cargo)
 - [Debug playground using vscode](#debug-playground-using-vscode)
 - [Develop the dashboard](#develop-the-dashboard)
-  * [Dashboard v1](#dashboard-v1)
-  * [Dashboard v2](#dashboard-v2)
 - [Observability components](#observability-components)
   * [Cluster Control](#cluster-control)
   * [Monitoring](#monitoring)
@@ -61,7 +59,7 @@ You can also read the [crate level documentation](https://risingwavelabs.github.
 - The `docker` folder contains Docker files to build and start RisingWave.
 - The `e2e_test` folder contains the latest end-to-end test cases.
 - The `docs` folder contains the design docs. If you want to learn about how RisingWave is designed and implemented, check out the design docs here.
-- The `dashboard` folder contains RisingWave dashboard v2.
+- The `dashboard` folder contains RisingWave dashboard.
 
 The [src/README.md](../src/README.md) file contains more details about Design Patterns in RisingWave.
 
@@ -155,7 +153,6 @@ For example, you can modify the default section to:
   default:
     - use: minio
     - use: meta-node
-      enable-dashboard-v2: false
     - use: compute-node
     - use: frontend
     - use: prometheus
@@ -215,19 +212,7 @@ Currently, RisingWave has two versions of dashboards. You can use RiseDev config
 
 The dashboard will be available at `http://127.0.0.1:5691/` on meta node.
 
-### Dashboard v1
-
-Dashboard v1 is a single HTML page. To preview and develop this version, install Node.js, and run this command:
-
-```shell
-cd src/meta/src/dashboard && npx reload -b
-```
-
-Dashboard v1 is bundled by default along with meta node. When the cluster is started, you may use the dashboard without any configuration.
-
-### Dashboard v2
-
-The development instructions for dashboard v2 are available [here](../dashboard/README.md).
+The development instructions for dashboard are available [here](../dashboard/README.md).
 
 ## Observability components
 

src/risedevtool/config/src/main.rs

@@ -88,7 +88,7 @@ impl Components {
             Self::Redis => "[Component] Redis",
             Self::BuildConnectorNode => "[Build] Build RisingWave Connector (Java)",
             Self::RustComponents => "[Build] Rust components",
-            Self::Dashboard => "[Build] Dashboard v2",
+            Self::Dashboard => "[Build] Dashboard",
             Self::Tracing => "[Component] Tracing: Grafana Tempo",
             Self::Release => "[Build] Enable release mode",
             Self::AllInOne => "[Build] Enable all-in-one binary",
@@ -137,7 +137,7 @@ to RiseDev directory."
             }
             Self::Dashboard => {
                 "
-Required if you want to build dashboard v2 from source."
+Required if you want to build dashboard from source."
             }
             Self::Tracing => {
                 "
@@ -207,7 +207,7 @@ As a result, RisingWave will dump the core on panics.
             "ENABLE_KAFKA" => Some(Self::Kafka),
             "ENABLE_PUBSUB" => Some(Self::Pubsub),
             "ENABLE_BUILD_RUST" => Some(Self::RustComponents),
-            "ENABLE_BUILD_DASHBOARD_V2" => Some(Self::Dashboard),
+            "ENABLE_BUILD_DASHBOARD" => Some(Self::Dashboard),
             "ENABLE_COMPUTE_TRACING" => Some(Self::Tracing),
             "ENABLE_RELEASE_PROFILE" => Some(Self::Release),
             "ENABLE_DYNAMIC_LINKING" => Some(Self::DynamicLinking),
@@ -230,7 +230,7 @@ As a result, RisingWave will dump the core on panics.
             Self::Pubsub => "ENABLE_PUBSUB",
             Self::Redis => "ENABLE_REDIS",
             Self::RustComponents => "ENABLE_BUILD_RUST",
-            Self::Dashboard => "ENABLE_BUILD_DASHBOARD_V2",
+            Self::Dashboard => "ENABLE_BUILD_DASHBOARD",
             Self::Tracing => "ENABLE_COMPUTE_TRACING",
             Self::Release => "ENABLE_RELEASE_PROFILE",
             Self::AllInOne => "ENABLE_ALL_IN_ONE",