refactor: split ui, make ui reusable (pingcap#1281)

* init eslint/prettier/husky configs * fix huksy and add typescript * add tidb-dasbhoard-client package * add axios for tidb-dashboard-client * use single request parameter for tidb-dashboard-client * copy tidb-dashboard-lib from clinic-ui * rename tidb-dashboard-lib output * fix build tidb-dashboard-client fail * revert css variables * tidy dependencies * init tidb-dashboard-for-op * revert tidb-dashboard-for-op * update prettier config * add dev mode for tidb-dashboard-lib * copy files from ui * copy ui/lib to tidb-dashboard-lib * copy apps from ui to tidb-dashboard-lib * fix compile error * refine compile * fix dev for tidb-dashboard-lib * copy dashboardApp to tidb-dashboard-for-op * make tidb-dashboard-for-op pass compile * refine * export statement * export all apps * fix runtime crash * refine build * refactor slow query * extract interface for slow query * wip * fix context * make slow query work in the new arch * bring ::selection default value back * extract interface for statement app * adjust statement app * make statement interface implement slow query interface * refine tsc-alias * refine type definition * rename config field to cfg field * cancel export client from tidb-dashboard-lib * finish overview migration * migrate cluster info app * fix * migrate for top sql app * migrate keyviz app * migrate system report app * migrate search logs app * migrate instance profiling app * migrate conprof app * migrate debug api app * migrate query editor app * migrate configuration app * mirgrate user profile app * migrate diagnose app * migrate optimizer trace app * remove client in the component * refine * fix * move auth out of tidb-dashboard-lib * add event interface for UserProfile app * generate seperated models for tidb-dashboard-client and tidb-dashboard-lib * move app options and registry out of tidb-dashboard-lib * support update i18n distro when running * handle distro (part 1) * handle distro (part 2) * move publicPathPrefix out of tidb-dashboard-lib * rename basePath to apiPathBase * slight refine * remove sentry * refine client * refine build for tidb-dashboard-for-op * refine swagger build scripts * ignore prettier auto generated api files * ignore prettier generated distro string res * support skip watch api * refine load env * remove compat.js * migrate diagnose report app * TiDB Dashboard For Cloud variant (pingcap#1286) * tidb-dashboard-for-cloud * refine * listen hash change to switch apps * fix listen hash change * fix undefined ctx!.cfg.apiPathBase * disable export for tidb-dashbaord-for-cloud * update output file name * update package version * rename tidb-dashboard-for-cloud to tidb-dashboard-for-dbaas * update version * add html to test cdn * add README and update version * update README and version * update index.html * add iframe case for tidb-dashboard-for-dbaas * refine iframe test * refine * track route change for tidb-dashboard-for-dbaas * update startDashboard parameters and update version * fix can't modify statement/keyviz settings * refine watch * tidb-dashboard-for-dbaas-0.0.7 * update backend api url for test * refine update html files * move ngm from apps to components * listen routes change for all apps * expose topsql for tidb-dashboard-for-dbaas * add topsql entry * update dashboardApp entry file * revert listen tidb-dashboard-lib changes * output to dist instead of build for tidb-dashboard-for-op * fix distro in dev mode * refine wording * fix envFile and bump tidb-dashboard-for-dbaas 0.0.9 * migrate cypress (pingcap#1329) * copy cypress folder * fix start_tiup wait_tiup scripts path * refine build * update README for cypress * update Makefile and CI/CD * fix ci * fix style * fix cypress cache * test fix cypress cache for ci * test * revert cypress install * test * revert test * revert comments * move workflows back * fix: make main content area responsed for sider collapsing reason: not matched use-spring version * refine build * fix font-size * fix distro * fix broken css, make `margin-left: -48px` work again reason: css order * update README and docs * feat(ui): support metrics plan (pingcap#1331) * add metrics on overview page * add remaining metrics on overview page * update crosshair * adjust metrics panel layouts * update layout * update layout * add more tidb metrics panel on overview page * 0.0.10-beta for tidb-dashboard-for-dbaas * export overview for tidb-dashboard-for-dbaas * 0.0.11-beta for tidb-dashboard-for-dbaas * add overview link Co-authored-by: baurine <2008.hbl@gmail.com> Co-authored-by: Yini Xu <34967660+YiniXu9506@users.noreply.github.com>
YiniXu9506 · Jul 16, 2022 · e8c4fcc · e8c4fcc
1 parent 250a148
commit e8c4fcc
Show file tree

Hide file tree

Showing 739 changed files with 74,849 additions and 201 deletions.
diff --git a/.github/autolabeler.yml b/.github/autolabeler.yml
@@ -1,4 +1,5 @@
 area/frontend:
   - /ui
+  - /ui-new
 area/backend:
   - *.go
diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
@@ -18,7 +18,7 @@ jobs:
         uses: actions/checkout@v3
       - uses: actions/setup-go@v3
         with:
-          go-version: "1.15"
+          go-version: '1.15'
       - name: Load go module cache
         uses: actions/cache@v3
         with:
@@ -48,23 +48,20 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      # https://pnpm.io/continuous-integration#github-actions
+      - name: Setup PNPM
+        uses: pnpm/action-setup@v2.2.2
         with:
-          node-version: "16"
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
-        working-directory: ui
-      - uses: actions/cache@v3
-        id: yarn-cache
+          version: 7
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
+          node-version: '16'
+          cache: 'pnpm'
+          cache-dependency-path: 'ui-new/pnpm-lock.yaml'
       - uses: actions/setup-go@v3
         with:
-          go-version: "1.15"
+          go-version: '1.15'
       - name: Load go module cache
         uses: actions/cache@v3
         with:
@@ -74,13 +71,13 @@ jobs:
           key: ${{ runner.os }}-go-${{ hashFiles('**/go.sum') }}
           restore-keys: |
             ${{ runner.os }}-go-
-      - name: Install yarn packages
+      - name: Install ui packages
         run: |
-          make yarn_dependencies
+          make ui_deps
       - name: Check format
         run: |
-          yarn prettier --check . || (echo "::error ::Please format your code by using 'yarn fmt'"; exit 1)
-        working-directory: ui
+          pnpm fmt-check || (echo "::error ::Please format your code by using 'pnpm fmt-fix'"; exit 1)
+        working-directory: ui-new
       - name: Build UI
         run: |
           make ui

diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
@@ -14,20 +14,17 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      # https://pnpm.io/continuous-integration#github-actions
+      - name: Setup PNPM
+        uses: pnpm/action-setup@v2.2.2
         with:
-          node-version: "16"
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
-        working-directory: ui
-      - uses: actions/cache@v3
-        id: yarn-cache
+          version: 7
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
+          node-version: '16'
+          cache: 'pnpm'
+          cache-dependency-path: 'ui-new/pnpm-lock.yaml'
       - uses: actions/setup-go@v3
         with:
           go-version: "1.15"
@@ -50,7 +47,7 @@ jobs:
         run: |
           make ui
       - name: Pack UI assets for release
-        working-directory: ui/build
+        working-directory: ui-new/packages/tidb-dashboard-for-op/dist
         run: |
           zip -r ../static-assets.zip .
       - name: Create release
@@ -69,7 +66,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           upload_url: ${{ steps.create_release.outputs.upload_url }}
-          asset_path: ./ui/static-assets.zip
+          asset_path: ./ui-new/packages/tidb-dashboard-for-op/static-assets.zip
           asset_name: static-assets.zip
           asset_content_type: application/zip
       - name: Generate embedded UI assets

diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@v3
       - uses: actions/setup-go@v3
         with:
-          go-version: "1.15"
+          go-version: '1.15'
       - name: Load go module cache
         uses: actions/cache@v3
         with:
@@ -52,7 +52,7 @@ jobs:
         uses: actions/checkout@v3
       - uses: actions/setup-go@v3
         with:
-          go-version: "1.15"
+          go-version: '1.15'
       - name: Load go module cache
         uses: actions/cache@v3
         with:
@@ -108,23 +108,28 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      # https://pnpm.io/continuous-integration#github-actions
+      - name: Setup PNPM
+        uses: pnpm/action-setup@v2.2.2
         with:
-          node-version: "16"
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
-        working-directory: ui
-      - uses: actions/cache@v3
-        id: yarn-cache
+          version: 7
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          node-version: '16'
+          cache: 'pnpm'
+          cache-dependency-path: 'ui-new/pnpm-lock.yaml'
+      - name: Load cypress cache
+        uses: actions/cache@v3
+        id: cypress-cache
+        with:
+          path: ~/.cache/Cypress
+          key: ${{ runner.os }}-cypress-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-
+            ${{ runner.os }}-cypress-
       - uses: actions/setup-go@v3
         with:
-          go-version: "1.15"
+          go-version: '1.15'
       - name: Load go module cache
         uses: actions/cache@v3
         with:
@@ -186,7 +191,7 @@ jobs:
       - name: Upload coverage to Codecov
         uses: codecov/codecov-action@v2
         with:
-          files: ./ui/.nyc_output/out.json
+          files: ./ui-new/packages/tidb-dashboard-for-op/.nyc_output/out.json
           fail_ci_if_error: true
           flags: e2e_test
           verbose: true
diff --git a/.github/workflows/upload-e2e-snapshots.yaml b/.github/workflows/upload-e2e-snapshots.yaml
@@ -32,20 +32,17 @@ jobs:
         uses: actions/checkout@v3
         with:
           ref: ${{ github.event.inputs.ref }}
-      - uses: actions/setup-node@v3
+      # https://pnpm.io/continuous-integration#github-actions
+      - name: Setup PNPM
+        uses: pnpm/action-setup@v2.2.2
         with:
-          node-version: "16"
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
-        working-directory: ui
-      - uses: actions/cache@v3
-        id: yarn-cache
+          version: 7
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
+          node-version: '16'
+          cache: 'pnpm'
+          cache-dependency-path: 'ui-new/pnpm-lock.yaml'
       - uses: actions/setup-go@v3
         with:
           go-version: "1.15"
@@ -100,7 +97,7 @@ jobs:
           UI: 1
           FEATURE_VERSION: ${{ matrix.feature_version }}
       - name: Delete Previous Snapshots
-        run: rm -rf ${{ github.workspace }}/ui/cypress/snapshots
+        run: rm -rf ${{ github.workspace }}/ui-new/packages/tidb-dashboard-for-op/cypress/snapshots
       - name: Run E2E Features Test
         run: make e2e_test_specify
         env:
@@ -115,10 +112,10 @@ jobs:
         uses: actions/upload-artifact@v2
         with:
           name: e2e-video-${{ matrix.feature_version }}
-          path: ${{ github.workspace }}/ui/cypress/videos/**/*
+          path: ${{ github.workspace }}/ui-new/packages/tidb-dashboard-for-op/cypress/videos/**/*
       - name: Upload snapshots artifact
         uses: actions/upload-artifact@v2
         if: always()
         with:
           name: e2e-snapshots-${{ matrix.feature_version }}
-          path: ${{ github.workspace }}/ui/cypress/snapshots/**/*
+          path: ${{ github.workspace }}/ui-new/packages/tidb-dashboard-for-op/cypress/snapshots/**/*
diff --git a/.gitignore b/.gitignore
@@ -55,3 +55,6 @@ fabric.properties
 
 # Android studio 3.1+ serialized cache file
 .idea/caches/build_file_checksums.ser
+
+# ui
+.pnpm-debug.log
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -44,9 +44,9 @@ The followings are required for developing TiDB Dashboard:
 
 - git - Version control
 - make - Build tool (run common workflows)
-- [Golang 1.13+](https://golang.org/) - To compile the server.
-- [Node.js 12+](https://nodejs.org/) - To compile the front-end.
-- [Yarn 1.21+](https://classic.yarnpkg.com/en/docs/install) - To manage front-end dependencies.
+- [Golang 1.15+](https://golang.org/) - To compile the server.
+- [Node.js 16+](https://nodejs.org/) - To compile the front-end.
+- [PNPM 7](https://pnpm.io/) - To manage front-end dependencies.
 - [Java 8+](https://www.java.com/ES/download/) - To generate JavaScript API client by OpenAPI specification.
 
 ### Step 3. Build and Run TiDB Dashboard
@@ -69,9 +69,9 @@ The followings are required for developing TiDB Dashboard:
 
    ```bash
    # In tidb-dashboard directory:
-   cd ui
-   yarn  # install all dependencies
-   yarn start
+   cd ui-new
+   pnpm i # install all dependencies
+   pnpm dev
    ```
 
 1. That's it! You can access TiDB Dashboard now: http://127.0.0.1:3001
@@ -81,9 +81,8 @@ The followings are required for developing TiDB Dashboard:
 When back-end server and front-end server are both started, E2E tests can be run by:
 
 ```bash
-cd ui/tests
-yarn
-yarn test
+cd ui-new/packages/tidb-dashboard-for-op
+pnpm open:cypress
 ```
 
 > Now we have only a few e2e tests. Contributions are welcome!
@@ -101,20 +100,6 @@ see all TiDB Dashboard API endpoints and specifications, or even send API reques
 
 Swagger UI is available at http://localhost:12333/dashboard/api/swagger after the above Step 3 is finished.
 
-### Storybook
-
-We expose some UI components in a playground provided by [React Storybook]. In the playground you can see what
-components look like and how to use them.
-
-Storybook can be started using the following commands:
-
-```bash
-cd ui
-yarn storybook
-```
-
-> We have not yet make all components available in the Storybook. Contributions are welcome!
-
 ## Contribution flow
 
 This is a rough outline of what a contributor's workflow looks like:
@@ -135,8 +120,8 @@ This is a rough outline of what a contributor's workflow looks like:
   - Frontend:
 
     ```bash
-    # In ui directory:
-    yarn fmt
+    # In ui-new directory:
+    pnpm fmt
     ```
 
     > Recommended to install [Prettier plugin](https://prettier.io/docs/en/editors.html) for your editor so that there will be auto format on save.
@@ -193,10 +178,8 @@ If the change affects many subsystems, you can use `*` instead, like `*: foo`.
 
 The body of the commit message should describe why the change was made and at a high level, how the code works.
 
-[diagnosis sig]: https://github.com/pingcap/community/tree/master/special-interest-groups/sig-diagnosis
 [pd]: https://github.com/pingcap/pd
 [tidb]: https://github.com/pingcap/tidb
 [tikv]: https://github.com/tikv/tikv
 [tiup]: https://tiup.io
 [swagger]: https://swagger.io
-[react storybook]: https://storybook.js.org
diff --git a/Makefile b/Makefile
@@ -60,40 +60,44 @@ e2e_test:
 
 .PHONY: e2e_compat_features_test
 e2e_compat_features_test:
-	cd ui &&\
-	yarn &&\
-	yarn run:e2e-test:compat-features --env FEATURE_VERSION=$(FEATURE_VERSION) TIDB_VERSION=$(TIDB_VERSION)
+	cd ui-new &&\
+	pnpm i &&\
+	cd packages/tidb-dashboard-for-op &&\
+	pnpm run:e2e-test:compat-features --env FEATURE_VERSION=$(FEATURE_VERSION) TIDB_VERSION=$(TIDB_VERSION)
 
 .PHONY: e2e_common_features_test
 e2e_common_features_test:
-	cd ui &&\
-	yarn &&\
-	yarn run:e2e-test:common-features --env TIDB_VERSION=$(TIDB_VERSION)
+	cd ui-new &&\
+	pnpm i &&\
+	cd packages/tidb-dashboard-for-op &&\
+	pnpm run:e2e-test:common-features --env TIDB_VERSION=$(TIDB_VERSION)
 
 .PHONY: e2e_without_ngm_test
 e2e_without_ngm_test:
-	cd ui &&\
-	yarn &&\
-	yarn run:e2e-test:without-ngm --env TIDB_VERSION=$(TIDB_VERSION) WITHOUT_NGM=$(WITHOUT_NGM)
+	cd ui-new &&\
+	pnpm i &&\
+	cd packages/tidb-dashboard-for-op &&\
+	pnpm run:e2e-test:without-ngm --env TIDB_VERSION=$(TIDB_VERSION) WITHOUT_NGM=$(WITHOUT_NGM)
 
 .PHONY: e2e_test_specify
 e2e_test_specify:
-	cd ui &&\
-	yarn &&\
-	yarn run:e2e-test:specify --env TIDB_VERSION=$(TIDB_VERSION) -- --spec $(E2E_SPEC)
+	cd ui-new &&\
+	pnpm i &&\
+	cd packages/tidb-dashboard-for-op &&\
+	pnpm run:e2e-test:specify --env TIDB_VERSION=$(TIDB_VERSION) -- --spec $(E2E_SPEC)
 
 .PHONY: dev
 dev: lint default
 
-.PHONY: yarn_dependencies
-yarn_dependencies: install_tools
-	cd ui &&\
-	yarn install --frozen-lockfile
+.PHONY: ui_deps
+ui_deps: install_tools
+	cd ui-new &&\
+	pnpm i
 
 .PHONY: ui
-ui: yarn_dependencies
-	cd ui &&\
-	yarn build
+ui: ui_deps
+	cd ui-new &&\
+	pnpm build
 
 .PHONY: go_generate
 go_generate: export PATH := $(shell pwd)/bin:$(PATH)

diff --git a/README.md b/README.md
@@ -73,7 +73,7 @@ Thank you to all the people who already contributed to TiDB Dashboard!
 ## Architecture
 
 This repository contains both Dashboard HTTP API and Dashboard UI. Dashboard HTTP API is placed in
-`pkg/` directory, written in Golang. Dashboard UI is placed in `ui/` directory, powered by React.
+`pkg/` directory, written in Golang. Dashboard UI is placed in `ui-new/` directory, powered by React.
 
 TiDB Dashboard can also be integrated into PD, as follows: