The dashboard roughly consists of two parts, a front end single-page web-application build with Typescript and React, and a back-end web server built with Python. These two parts are located within the directory
ray/dashboard.
You can install the dependencies of the dashboard by running npm install in the ray/dashboard/client directory, and generate a production build of the dashboard by running npm run build.
For general purpose development, the best setup is to use the hot-reloading server provided by the command npm run start in the ray/dashboard/client directory. This command will start the web application on port 3000 and recompile / reload front-end file changes as you make them. This also allows browser debuggers to be much more useful, as you can set breakpoints in your typescript code, as opposed to working with minified javascript in a production build.
In order to connect this development server up to a live running ray cluster, the cluster must be started with the environment command RAY_DASHBOARD_DEV which allows the forwarding of the data from the normal dashboard port 8265. I like to simply do the following:
RAY_DASHBOARD_DEV=1 ipython
> import ray; ray.init()
But you could also run RAY_DASHBOARD_DEV=1 ray start at the command line and connect with a script or iPython session from there.
After running these lines, you should see the development dashboard at localhost:3000 begin to display information about the ray cluster you are running.
The dashboard does not currently have front-end tests; however, it does have back-end tests that run in CI and that can be run locally by changing directory to ray/python/ray/ and then running pytest new_dashboard. new_dashboard is a symlink to the dashboard directory discussed before (there were two co-existing dashboard backends for a while), but the tests need to be run in here because the tests depend on ray helper modules that are in the file hierarchy here.
Please make sure the tests pass, and also make sure to run lint.
You can run lint on the backend / python code by running ./ci/format.sh from within the ray directory.
You can run lint on the Typescript code with the commands npm run lint and npm run lint-fix if you would like to fix in-place.
Once these changes are made, you can submit the PR and tag my Github user: @mfitton. If you made changes to the UI, a screenshot accompanying the PR is very helpful.