# Dashboard

The framework: [Next.js](https://nextjs.org).

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

```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 down
./risedev d dashboard
# 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](https://nextjs.org/docs/advanced-features/static-html-export).

```bash
npm run build
```

The built files are generated at `./out`.
