Cadence Web UI

Cadence is a distributed, scalable, durable, and highly available orchestration engine we developed at Uber Engineering to execute asynchronous long-running business logic in a scalable and resilient way.

This web UI is used to view workflows from Cadence, see what's running, and explore and debug workflow executions.

Getting Started

Configuration

Set these environment variables if you need to change their defaults

Variable	Description	Default
CADENCE_GRPC_PEERS	Comma-delimited list of gRPC peers	127.0.0.1:7833
CADENCE_GRPC_SERVICES_NAMES	Comma-delimited list of gRPC services to call	cadence-frontend
CADENCE_CLUSTERS_NAMES	Comma-delimited list of cluster names	cluster0
CADENCE_WEB_PORT	HTTP port to serve on	8088
CADENCE_ADMIN_SECURITY_TOKEN	Admin token for accessing admin methods	''

Note: To connect cadence-web to multiple clusters, you will need to add comma-delimted entries for CADENCE_GRPC_PEERS, CADENCE_GRPC_SERVICES_NAMES & CADENCE_CLUSTERS_NAMES for each cluster (each cluster values are grouped by their index within the Comma-delimited lists).

Example:

CADENCE_GRPC_PEERS=127.0.0.1:3000,127.0.0.1:5000 
CADENCE_GRPC_SERVICES_NAMES=cadence-frontend-cluster0,cadence-frontend-cluster1
CADENCE_CLUSTERS_NAMES=cluster0,cluster1

Using cadence-web

The latest version of cadence-web is included in the cadence composed docker containers in the main Cadence repository. Follow the instructions there to get started.

docker-compose -f docker/docker-compose.yml up

Building & developing cadence-web

cadence-web requires node v18 or greater to be able to run correctly.

Creating a production build

To create a production build, follow these steps:

1. Install npm packages and download idls

npm install && npm run install-idl && npm run generate:idl

2. Build the project files

npm run build

3. After building the code, start the server by running this command from the same directory as the build

npm start

4. Once the webapp is ready, access it through localhost:8088 (port can be changed using CADENCE_WEB_PORT environment variable)

Running development environment

To run the development server, follow these steps:

1. Install npm packages and download idls

npm install && npm run install-idl && npm run generate:idl

2. Run the development server using

npm run dev

3. Once the webapp is ready, access it through localhost:8088 (port can be changed using CADENCE_WEB_PORT environment variable)

Note: For contribution we recommend using dev containers, check VSCode Dev Containers section for more information

Using VSCode Dev Containers

1. Set up the Remote Containers plugin in VSCode.
2. Open the cadence-web directory in VSCode.
3. Make sure to update CADENCE_GRPC_PEERS with the correct host. (If you are connecting to a server on a container host machine use host.docker.interal:7833, where 7833 is the gRPC port for a running cadence-frontend service)
4. Use the Command Palette to select the 'Reopen folder in Container' option
5. Follow same commands listed in Running development environment section.

Developing cadence-web against cadence composed docker

To start development against dockerized cadence services, run the following command from the root of the project

docker-compose -f docker-compose-backend-services.yml up

You can customize the YAML file or reuse configurations from the cadence repository. (In case of reusing exsisting files: ensure that cadence-web is not included in the composed container services, or just remove it)

After running cadence, start cadence-web for development using one of the previous methods (Running development environment, VSCode Dev Containers)

NPM scripts

script	Description
build	Generate a production build
start	Start server for existing production build
dev	Run a development server
install-idl	Download idl files required for building/running the project
generate:idl	Move idl files inside the project and generate typescript types for them
test	Run all test cases. To pass extra jest flags, use environment specific scripts e.g. test:unit:*
test:unit	Run all unit tests. To pass extra jest flags, use environment specific scripts e.g. test:unit:*
test:unit:browser	Run only browser unit tests
test:unit:node	Run only node unit tests
lint	Run eslint
typecheck	Run typescript checks

License

MIT License, please see LICENSE for details.