Google Git
Sign in
chromium / infra / luci / luci-go / 5491328c0372fbf5ccffd0d7f769f324af794215 / . / milo / ui
tree: e6efc1e0c03f173df1865b9a21c00aa2f649f4b2 [path history] [tgz]
  1. cypress/
  2. src/
  3. .env.development
  4. .eslintignore
  5. .eslintrc.js
  6. .gitignore
  7. .npmignore
  8. .npmrc
  9. babel.config.json
  10. cypress.config.ts
  11. index.html
  12. jest.config.ts
  13. Makefile
  14. package-lock.json
  15. package.json
  16. README.md
  17. tsconfig.json
  18. vite.config.ts
milo/ui/README.md

LUCI Test Single UI

LUCI Test Single UI is the web UI for all LUCI Test systems.

Local Development Workflows

Prerequisites

You need to run the following commands to setup the environment.

# Activate the infra env (via the infra.git checkout):
cd /path/to/infra/checkout
eval infra/go/env.py

# Install the dependencies.
cd /path/to/this/directory
npm ci

Start a local AppEngine server

TODO: add instructions

Start a local UI server

To start a Vite local dev server, run

npm run dev

The local dev server only serves the SPA assets. It sends pRPC and HTTP REST requests to staging servers (typically hosted on GCP). Check .env.development for instructions to configure the target servers and other local development settings.

Login on a local UI server

Currently, there's no easy way to perform a login flow on a local UI server. To test the page with a logged in session, you can

  • deploy to a personal staging server with the following command, or

    1. npm run build && yes | gae.py upload -p ../ -A luci-milo-dev default

  • use an auth state obtained from staging or prod environment with the following steps.

    1. open `https://${singleUiHost}/ui/search` in a browser tab, then
    2. perform a login flow, then
    3. run copy(JSON.stringify(__STORE.authState.value)) in the browser devtool console to copy the auth state, then
    4. paste the output to auth_state.local.json, then
    5. visit any pages under http://localhost:8080/ui/.

    note that the auth state obtained from a dev environment cannot be used to query prod services and vice versa.

Add a new npm package

You can use npm install to add a new npm package.

LUCI Test Single UI uses a private npm registry (defined in .npmrc). By default, it rejects packages that are less than 7 days old (with an HTTP 451 Unknown error).

You can avoid this issue by temporarily switching to the public npm registry with the following steps.

  1. comment out the registry setting in .npmrc, then
  2. install the package, then
  3. replace the registry in all the URLs in the “resolved” field in package-lock.json with the private registry, then
  4. uncomment the registry setting in .npmrc, then
  5. wait 7 days before submitting your CL.

Others

Check the Makefile, the parent Makefile, and the "scripts" section in package.json for more available commands.