Skip to content

Latest commit

 

History

History

dashboard

README.md

Dashboard

The framework: Next.js.

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

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

Files

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. For example:

./risedev d
./risedev slt  e2e_test/nexmark/create_sources.slt.part
./risedev psql -c 'CREATE TABLE dimension (v1 int);'
./risedev psql -c 'CREATE MATERIALIZED VIEW mv AS SELECT auction.* FROM dimension join auction on auction.id-auction.id = dimension.v1;'
./risedev psql -c 'CREATE MATERIALIZED VIEW mv2 AS SELECT * FROM mv;'
./risedev psql -c 'CREATE MATERIALIZED VIEW mv3 AS SELECT count(*) FROM mv2;'

./risedev psql -c 'CREATE MATERIALIZED VIEW mv4 AS SELECT * FROM mv;'
./risedev psql -c 'CREATE MATERIALIZED VIEW mv5 AS SELECT count(*) FROM mv2;'
./risedev psql -c 'CREATE MATERIALIZED VIEW mv6 AS SELECT mv4.* FROM mv4 join mv2 using(id);'
./risedev psql -c 'CREATE MATERIALIZED VIEW mv7 AS SELECT max(id) FROM mv;'

./risedev psql -c 'CREATE MATERIALIZED VIEW mv8 AS SELECT mv.* FROM mv join mv6 using(id);'
./risedev psql -c 'CREATE SCHEMA s1;'
./risedev psql -c 'CREATE TABLE s1.t1 (v1 int);'
./risedev psql -c 'CREATE MATERIALIZED VIEW s1.mv1 AS SELECT s1.t1.* FROM s1.t1 join mv on s1.t1.v1 = mv.id;'

./risedev psql -c 'INSERT INTO dimension select 0 from generate_series(1, 20);'

Install dependencies and start the development server.

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.

./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.

npm run build

The built files are generated at ./out.