Skip to content

Latest commit

 

History

History
 
 

ui

README.md

Chaos Mesh Logo

UI

A Web UI for Chaos Mesh. Powered by ⚛️ Create React App.

How to develop

The following content can help you understand the overall structure of UI and how to develop it.

Main technologies

We use Typescript + React + Redux + Material UI as the main technologies. If you are not familiar with them, please read their documentation first.

Also, we use monorepo to manage the whole UI codebase. Here is the general structure:

ui
├── app
│   ├── src
│   │   ├── @types
│   │   ├── api
│   │   ├── components
│   │   ├── i18n
│   │   ├── images
│   │   ├── lib
│   │   ├── pages - place all landing pages
│   │   ├── reducers
│   │   ├── slices
├── packages
│   ├── mui-extends

One is app, which describe the whole UI interface, and the other is packages, which provide more complete and independent functionalities for app use.

Bootstrap

Prepare

If you don't have the nodejs and golang environments installed, see https://nodejs.org/en/download/ and https://golang.org/.

And we use pnpm as the dependency management. Please also install it.

Install deps

Into the ui folder, run:

pnpm i

This command will install all deps the UI needed.

Then, you need to provide an API server as a proxy, it will pass into an env var which named: REACT_APP_API_URL. There are three ways to get it:

  • From a remote deployed Chaos Mesh Dashboard

    If you have Chaos Mesh deployed in a remote cluster, you can use the dashboard service URL as the proxy.

  • From a local deployed Chaos Mesh Dashboard

    When the cluster is local (E.g., kind or minikube), you can use Port Forwarding to access it:

    kubectl port-forward -n chaos-mesh svc/chaos-dashboard 2333:2333

  • From local dashboard server

    Run chaos-dashboard server in your terminal:

    cd ..
go run cmd/chaos-dashboard/main.go

Start

We already place a one-step script to start the UI:

# cross-env REACT_APP_API_URL=http://localhost:2333 BROWSER=none react-scripts start
pnpm -F @ui/app start:default

Or if you want to specify the API_URL:

REACT_APP_API_URL=xxx BROWSER=none pnpm -F @ui/app start

Then open http://localhost:3000 to view it in the browser.

Packages

mui-extends

This package extends many of mui's components for use in the UI. It will use tsc to compile the code, simply run:

pnpm -F @ui/mui-extends build

to build them.

We provide storybook for previewing the components, you can run:

pnpm -F @ui/mui-extends build
pnpm -F @ui/mui-extends storybook

to open it.

License

Same as Chaos Mesh.