Release v2022.07.21.1

.github/workflows/build.yaml

@@ -18,7 +18,7 @@ jobs:
         uses: actions/checkout@v3
       - uses: actions/setup-go@v3
         with:
-          go-version: "1.13.5"
+          go-version: '1.15'
       - name: Load go module cache
         uses: actions/cache@v3
         with:
@@ -47,23 +47,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/[email protected]
         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/pnpm-lock.yaml'
       - uses: actions/setup-go@v3
         with:
-          go-version: "1.13.5"
+          go-version: '1.15'
       - name: Load go module cache
         uses: actions/cache@v3
         with:
@@ -73,12 +70,12 @@ 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)
+          pnpm fmt-check || (echo "::error ::Please format your code by using 'pnpm fmt-fix'"; exit 1)
         working-directory: ui
       - name: Build UI
         run: |

.github/workflows/release.yaml

@@ -14,23 +14,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/[email protected]
         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/pnpm-lock.yaml'
       - uses: actions/setup-go@v3
         with:
-          go-version: "1.13.5"
+          go-version: "1.15"
       - name: Load go module cache
         uses: actions/cache@v3
         with:
@@ -50,7 +47,7 @@ jobs:
         run: |
           make ui
       - name: Pack UI assets for release
-        working-directory: ui/build
+        working-directory: ui/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/packages/tidb-dashboard-for-op/static-assets.zip
           asset_name: static-assets.zip
           asset_content_type: application/zip
       - name: Generate embedded UI assets

.github/workflows/test.yaml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@v3
       - uses: actions/setup-go@v3
         with:
-          go-version: "1.13.5"
+          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.13.5"
+          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/[email protected]
         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/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.13.5"
+          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/packages/tidb-dashboard-for-op/.nyc_output/out.json
           fail_ci_if_error: true
           flags: e2e_test
           verbose: true

.github/workflows/upload-e2e-snapshots.yaml

@@ -32,23 +32,20 @@ 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/[email protected]
         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/pnpm-lock.yaml'
       - uses: actions/setup-go@v3
         with:
-          go-version: "1.13.5"
+          go-version: "1.15"
       - name: Load go module cache
         uses: actions/cache@v3
         with:
@@ -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/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/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/packages/tidb-dashboard-for-op/cypress/snapshots/**/*

.gitignore

@@ -55,3 +55,6 @@ fabric.properties
 
 # Android studio 3.1+ serialized cache file
 .idea/caches/build_file_checksums.ser
+
+# ui
+.pnpm-debug.log

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
@@ -70,8 +70,8 @@ The followings are required for developing TiDB Dashboard:
    ```bash
    # In tidb-dashboard directory:
    cd ui
-   yarn  # install all dependencies
-   yarn start
+   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/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:
@@ -136,7 +121,7 @@ This is a rough outline of what a contributor's workflow looks like:
 
     ```bash
     # In ui directory:
-    yarn fmt
+    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

Makefile

@@ -4,7 +4,7 @@ BUILD_TAGS ?=
 
 LDFLAGS ?=
 
-FEATURE_VERSION ?= 6.0.0
+FEATURE_VERSION ?= 6.2.0
 
 WITHOUT_NGM ?= false
 
@@ -61,39 +61,43 @@ 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)
+	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)
+	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)
+	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)
+	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
+.PHONY: ui_deps
+ui_deps: install_tools
 	cd ui &&\
-	yarn install --frozen-lockfile
+	pnpm i
 
 .PHONY: ui
-ui: yarn_dependencies
+ui: ui_deps
 	cd ui &&\
-	yarn build
+	pnpm build
 
 .PHONY: go_generate
 go_generate: export PATH := $(shell pwd)/bin:$(PATH)

cmd/tidb-dashboard/main.go

@@ -28,7 +28,7 @@ import (
 
 	"github.com/pingcap/log"
 	flag "github.com/spf13/pflag"
-	"go.etcd.io/etcd/pkg/transport"
+	"go.etcd.io/etcd/client/pkg/v3/transport"
 	"go.uber.org/zap"
 	"go.uber.org/zap/zapcore"
 

etc/go.mod

@@ -1,3 +1,3 @@
 module ignore_etc // a hack to ignore this directory in go commands
 
-go 1.13
+go 1.15