Dashboard

The framework: Next.js.

Next.js supports SPA, SSG and SSR. With this feature, the dashboard ui can be deployed in

Standalone machine serving only dashboard UI with a backend. (e.g. Dashboard for cloud product)
Meta service node. (e.g. Static HTML files integrated in meta service without any other dependencies like node.js)

Files

plain

dashboard/
--.next/ (generated by nextjs)
--node_modules/ (development dependencies)
--out/ (generated static files)
--components/ (React Component)
--lib/ (useful functions and classes)
--pages/ (web pages)
--public/ (static resources)
--styles/ (static css files)
--test/ (test cases)

Testing

TODO: Find a suitable testing framework

Development

Start a RisingWave cluster, create some tables and materialized views for testing purposes.

bash

# Start full cluster so prometheus is available.
./risedev k
./risedev clean-data
./risedev d full
# We maintain our own separate test data for testing the dashboard's rendering
# It provides nested MV-on-MV structures (nexmark and tpch only have 1-deep MV-on-MV).
# It also provides backpressure and lag scenarios.
./risedev slt e2e_test/dashboard/create_graph.slt.part --label dashboard

Install dependencies and start the development server.

bash

npm i
npm run dev

The dashboard is now served at port 3000. Go to the Settings page at http://localhost:3000/settings/ and set the API endpoint to http://localhost:5691/api in order to connect to the meta node of the running cluster.

Test with RisingWave meta node

The approach above is the best way to develop the dashboard since it supports hot reload and debugging. However, if you still want to test how the dashboard behaves when it's served as static files within the meta node, you can ask RiseDev to build the dashboard from the source code by running the following command.

bash

./risedev configure enable dashboard

The dashboard built with the latest sources will be served by meta node at port 5691.

Deployment

Generate the protos

Running npm i will generate the proto files under proto/gen automatically. In case there are modifications to the protos, you can regenerate them using the command npm run gen-proto.

Static HTML files

Build static files for standalone deployment without node.js. The built files are generated at ./out. Check more details at Static HTML Export.

bash

npm run build

The built files are generated at ./out.