How to Debug OpenPAI Webportal Locally

This document is about how to debug OpenPAI Webportal locally.

Set Up Environment

Please first install a OpenPAI cluster. Local webportal depends on the remote rest-server and other services to work.

On your local machine, please confirm the following environment is installed:

1. Node.js 8.17.0: We recommend you to use nvm(on Linux) or nvm-windows to manage your node version.

2. Yarn: The stable version should work. If it doesn't, please submit an issue on Github.

Debug Webportal Locally

Clone PAI's repo, and go into src/webportal. Create a .env file under src/webportal:

LAUNCHER_TYPE=k8s
LAUNCHER_SCHEDULER=hivedscheduler
# If you use AAD in your cluster, please change AUTHN_METHOD from basic to OIDC.
AUTHN_METHOD=basic
# If you have changed the port setting of rest-server, prometheus, alert-manager, grafana, k8s-dashboard or exporter,
# you should change the following setting accordingly.
REST_SERVER_URI=http://<PAI_MASTER_IP>:9186
PROMETHEUS_URI=http://<PAI_MASTER_IP>:9091
ALERT_MANAGER_URI=http://<PAI_MASTER_IP>:9093
GRAFANA_URI=http://<PAI_MASTER_IP>:3000
K8S_DASHBOARD_URI=https://<PAI_MASTER_IP>:9090
EXPORTER_PORT=9100
PROM_SCRAPE_TIME=300s
# If you have added some webportal plugins, please add them here.
WEBPORTAL_PLUGINS=[]
JOB_HISTORY=true
LOG_TYPE=log-manager

Then, run:

yarn install
yarn dev

If the code is successfully built, you can visit the local webportal throw http://localhost:9286. Any change to the code will trigger a re-build, and you will see the changes in http://localhost:9286 immediately.

Lint

You code changes should pass our CI first before it is merged into the codebase. One important CI issue related with webportal is: You should make sure your changes are linted.

We use eslint with standard config as linter and prettier as code formatter. Pleae refer to eslint config file and prettier config file for details.

Make sure to run yarn lint command every time before submit the PR, and resolve all the errors and warnings. Otherwise it will break the CI.

We recommend you to use some modern editors and install the eslint and prettier plugin for auto-formatting. For example, you could install eslint and prettier plugin in VSCode.