feat(dashboard): embedded assets into binary for release builds (#15656)

Signed-off-by: Bugen Zhao <[email protected]>

.github/workflows/dashboard_main.yml

@@ -22,7 +22,6 @@ jobs:
           npm install
           npm run lint
           npm run build
-          npm run build-static
       - name: Deploy
         uses: s0/git-publish-subdir-action@develop
         env:

.github/workflows/dashboard_pr.yml

@@ -61,4 +61,3 @@ jobs:
 
           npm run lint
           npm run build
-          npm run build-static

Cargo.toml

@@ -25,6 +25,7 @@ members = [
   "src/java_binding",
   "src/jni_core",
   "src/meta",
+  "src/meta/dashboard",
   "src/meta/model_v2",
   "src/meta/model_v2/migration",
   "src/meta/node",
@@ -179,6 +180,7 @@ risingwave_hummock_test = { path = "./src/storage/hummock_test" }
 risingwave_hummock_trace = { path = "./src/storage/hummock_trace" }
 risingwave_mem_table_spill_test = { path = "./src/stream/spill_test" }
 risingwave_meta = { path = "./src/meta" }
+risingwave_meta_dashboard = { path = "./src/meta/dashboard" }
 risingwave_meta_service = { path = "./src/meta/service" }
 risingwave_meta_model_migration = { path = "src/meta/model_v2/migration" }
 risingwave_meta_model_v2 = { path = "./src/meta/model_v2" }

dashboard/next.config.js

@@ -21,6 +21,11 @@
 const nextConfig = {
   output: "export",
   trailingSlash: true,
+  eslint: {
+    // We have a separate step for running ESLint in CI.
+    // Ignore to skip the development dependency on `eslint` for production builds.
+    ignoreDuringBuilds: true,
+  },
 }
 
 module.exports = nextConfig

dashboard/package.json

@@ -4,7 +4,6 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "build-static": "next build",
     "gen-proto": "./scripts/generate_proto.sh",
     "lint": "prettier --check . && next lint",
     "format": "prettier --write . && next lint --fix",
@@ -63,7 +62,7 @@
     "express": "^4.18.1",
     "prettier": "^2.7.1",
     "prettier-plugin-organize-imports": "^3.1.1",
-    "typescript": "^5.3.3"
+    "typescript": "5.4.2"
   },
   "overrides": {
     "react-json-view": {
@@ -75,4 +74,4 @@
       "react-dom": "^18.2.0"
     }
   }
-}
+}

dashboard/pages/fragment_graph.tsx

@@ -329,7 +329,7 @@ export default function Streaming() {
         clearInterval(interval)
       }
     }
-  }, [backPressureDataSource])
+  }, [backPressureDataSource, toast])
 
   const backPressures = useMemo(() => {
     if (promethusMetrics || embeddedBackPressureInfo) {

docker/Dockerfile

@@ -22,7 +22,7 @@ RUN apt-get update && apt-get install -y curl gnupg protobuf-compiler && mkdir -
 COPY ./dashboard/ /risingwave/dashboard
 COPY ./proto  /risingwave/proto
 
-RUN cd /risingwave/dashboard && npm i && npm run build-static && rm -rf node_modules
+RUN cd /risingwave/dashboard && npm i && npm run build && rm -rf node_modules
 
 FROM base AS rust-base
 

docker/Dockerfile.hdfs

@@ -23,7 +23,7 @@ RUN apt-get update && apt-get install -y curl gnupg protobuf-compiler && mkdir -
 COPY ./dashboard/ /risingwave/dashboard
 COPY ./proto  /risingwave/proto
 
-RUN cd /risingwave/dashboard && npm i && npm run build-static && rm -rf node_modules
+RUN cd /risingwave/dashboard && npm i && npm run build && rm -rf node_modules
 
 
 FROM base AS java-planner

src/meta/Cargo.toml

@@ -53,6 +53,7 @@ risingwave_common = { workspace = true }
 risingwave_common_heap_profiling = { workspace = true }
 risingwave_connector = { workspace = true }
 risingwave_hummock_sdk = { workspace = true }
+risingwave_meta_dashboard = { workspace = true }
 risingwave_meta_model_migration = { workspace = true }
 risingwave_meta_model_v2 = { workspace = true }
 risingwave_object_store = { workspace = true }

src/meta/dashboard/Cargo.toml

@@ -0,0 +1,34 @@
+[package]
+name = "risingwave_meta_dashboard"
+version = { workspace = true }
+edition = { workspace = true }
+homepage = { workspace = true }
+keywords = { workspace = true }
+license = { workspace = true }
+repository = { workspace = true }
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+anyhow = "1"
+axum = "0.6"
+bytes = "1"
+hyper = "0.14"
+mime_guess = "2"
+reqwest = "0.11"
+rust-embed = { version = "8", features = ["interpolate-folder-path", "mime-guess"] }
+thiserror-ext = { workspace = true }
+tracing = "0.1"
+url = "2"
+
+[dev-dependencies]
+tokio = { version = "1", features = ["full"] }
+tracing-subscriber = "0.3"
+
+[build-dependencies]
+anyhow = "1"
+cargo-emit = "0.2"
+dircpy = "0.3"
+npm_rs = "1"
+
+[lints]
+workspace = true

src/meta/dashboard/build.rs

@@ -0,0 +1,77 @@
+// Copyright 2024 RisingWave Labs
+//
+// Licensed 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.
+
+use std::path::{Path, PathBuf};
+
+use cargo_emit::{rerun_if_changed, rustc_cfg};
+use npm_rs::{NodeEnv, NpmEnv};
+
+fn env_var_is_true(key: &str) -> bool {
+    cargo_emit::rerun_if_env_changed!(key);
+
+    std::env::var(key)
+        .map(|value| {
+            ["1", "t", "true"]
+                .iter()
+                .any(|&s| value.eq_ignore_ascii_case(s))
+        })
+        .unwrap_or(false)
+}
+
+const DASHBOARD_DIR: &str = "../../../dashboard";
+
+fn dest_dir() -> PathBuf {
+    let out_dir = std::env::var("OUT_DIR").unwrap();
+    Path::new(&out_dir).join("assets")
+}
+
+fn build() -> anyhow::Result<()> {
+    // TODO(bugen): we should include all files and subdirectories under `DASHBOARD_DIR`
+    // while excluding the `out` directory. There's no elegant way to do this.
+    rerun_if_changed!(format!("{DASHBOARD_DIR}/components"));
+
+    let exit_status = NpmEnv::default()
+        .with_node_env(&NodeEnv::Production)
+        .set_path(DASHBOARD_DIR)
+        .init_env()
+        .install(None)
+        .run("build")
+        .exec()?;
+
+    if !exit_status.success() {
+        anyhow::bail!("dashboard build failed with status: {}", exit_status);
+    }
+
+    let dest = dest_dir();
+    let src = Path::new(DASHBOARD_DIR).join("out");
+    dircpy::copy_dir(src, dest)?;
+
+    Ok(())
+}
+
+fn main() -> anyhow::Result<()> {
+    let should_build = env_var_is_true("ENABLE_BUILD_DASHBOARD");
+
+    if should_build {
+        build()?;
+        // Once build succeeded, set a cfg flag to indicate that the embedded assets
+        // are ready to be used.
+        rustc_cfg!("dashboard_built");
+    } else {
+        // If we're not to build, create the destination directory but keep it empty.
+        std::fs::create_dir_all(dest_dir())?;
+    }
+
+    Ok(())
+}