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

• How to develop
  • Main technologies
  • Bootstrap
    • Global env
    • Install deps
    • Start
  • Structure
  • The rules we followed
    • TS or JS
    • Styles
    • Be Compact
• License

The following content can help you understand how to develop dashboard and its overall structure.

If you haven't installed the nodejs and golang environment, checkout https://nodejs.org/en/download/ and https://golang.org/.

And also, we use Yarn 1 as the dependency management. Maybe we will migrate to Yarn 2 in the future, but not now.

If you just cloned a fresh Chaos Mesh repo, into the ui folder, run:

yarn bootstrap

This command will install all deps the dashboard 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.

  Try to access it with http://NodePort:2333.

• 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-testing svc/chaos-dashboard 2333:2333

• From local dashboard server

  There have two ways to run chaos-dashboard server in your terminal:

  • cd .. && go run cmd/chaos-dashboard/main.go
  • yarn bootstrap && yarn server

  One is real-time, the other needs to be compiled before use. The compiled bundle the extra Swagger API HTML into the binary file.

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

# cross-env REACT_APP_API_URL=http://localhost:2333 BROWSER=none react-scripts start
yarn start:default

Then open http://localhost:3000 to see the preview effect.

If you want to run the dashboard and the local server concurrently:

yarn start:all

src
├── @types
├── api
├── components
├── components-mui
├── i18n
├── lib
├── pages
├── reducers
├── routes.tsx
├── slices
├── store.ts
└── theme.ts

The above tree structure explained as follow:

• @types place global types, which use for Typescript.
• api place all requests.
• components place all packaged components.
• components-mui nearly the same as components, but inherit from Material UI.
• i18n place all translations.
• lib place some independent functions and common utils.
• reducers (Redux reducers)
• routes.tsx (Client routes)
• slices Redux Tookit slices
• store.ts (Redux store)
• theme place global theme definitions.

For better collaboration and review, we have developed a few rules to help us develop better.

• TS or JS
• Styles
• Be Compact

Before you contribute, you must read the following carefully.

First, we use husky and lint-staged to make prettier format our code automatically before commit.

And also, because some of us use vscode to develop the dashboard, we recommend to use sort-imports to format all imports. (Sort automatically for now)

Currently, we use @material-ui/styles to isolate each component styles.

We hope you can follow this order (Don't care about their value) to organize all styles:

// Position first
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
// Then display
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
// Layout
width: 0;
height: 0;
margin: 0;
padding: 0;
// Colors
background: #fff;
color: #000;
// Outside
border: 0;
box-shadow: none;
// Finally, not often used values can be in any order

• Don't include unused deps.
• Don't let your code be too long-winded, there will be a lot of elegant writing.

Same as Chaos Mesh.