diff --git a/Makefile.toml b/Makefile.toml index ac237fac06628..d2dfae88e6962 100644 --- a/Makefile.toml +++ b/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", ] diff --git a/dashboard/README.md b/dashboard/README.md index 28a9c29f4c6e8..fd4986b4b5bc3 100644 --- a/dashboard/README.md +++ b/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,10 +50,11 @@ 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 @@ -61,9 +62,11 @@ 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`. diff --git a/dashboard/mock/fetch.sh b/dashboard/mock/fetch.sh index 463d2a836c633..5cc278e01d0c5 100755 --- a/dashboard/mock/fetch.sh +++ b/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 diff --git a/dashboard/next.config.js b/dashboard/next.config.js index b9b76901086ee..6a82469449776 100644 --- a/dashboard/next.config.js +++ b/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 diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json index e72946b00bff7..e9cb795252f6c 100644 --- a/dashboard/package-lock.json +++ b/dashboard/package-lock.json @@ -66,9 +66,9 @@ } }, "node_modules/@adobe/css-tools": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.0.1.tgz", - "integrity": "sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g==", + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.1.tgz", + "integrity": "sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==", "dev": true }, "node_modules/@ampproject/remapping": { @@ -10927,9 +10927,9 @@ "dev": true }, "@adobe/css-tools": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.0.1.tgz", - "integrity": "sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g==", + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.1.tgz", + "integrity": "sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==", "dev": true }, "@ampproject/remapping": { diff --git a/docker/Dockerfile b/docker/Dockerfile index d788b4f435a0d..547d7aed477bf 100644 --- a/docker/Dockerfile +++ b/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 diff --git a/docs/developer-guide.md b/docs/developer-guide.md index e256d1a5ebd83..44d57f7c690a1 100644 --- a/docs/developer-guide.md +++ b/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 diff --git a/src/risedevtool/config/src/main.rs b/src/risedevtool/config/src/main.rs index 876d920109d87..ac36d475b83c3 100644 --- a/src/risedevtool/config/src/main.rs +++ b/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",