Release v2022.07.21.1 (#1353) [skip pd_pr]

* bump grpc (#1323) * refactor: split ui, make ui reusable (#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 (#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 (#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 (#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 <[email protected]> Co-authored-by: Yini Xu <[email protected]> * refactor(ui): cleanup after refactoring UI (#1334) * remove original ui folder * rename ui-new to ui * ui: refine ui build script (#1335) * merge all models into a file * fix problem trigger tidb-dashboard-lib rebuild too many times * ui code refines (#1336) * fix broken css for tidb-dashboard-for-dbaas * fix react-hooks/exhaustive-deps warning * remove un-used comments * fix tidb-dashboard-for-dbaas root font-size * Refine metrics (#1338) * fix(metrics): orphan data points caused by `null` value * feat(metrics-chart): add nullValue config * fix: d3 deps conflict (#1343) * feat: extract metrics from overview app (#1337) * chore: extract metrics from overview app * update metrics app on dbaas * update side menu and metrics panel ui * resolve comments * chore: update metrics query * chore: add new metrics * chore: update promql rate_interval * remove useless file * remove un-used apis * align the chart and toolbar Co-authored-by: Suhaha <[email protected]> Co-authored-by: baurine <[email protected]> * fix: Unnecessary render (#1349) * fix: Unnecessary render * chore: use debounce * Feat visual plan (#1347) * Dashboard: support parse visual plan (#1227) * init * fix * add test * fix * use binary_plan (#1284) * Visual Plan (#1285) * feat: add visual plan for slowquery and statement * make visual plan as a independent module * update without minimap * update minimap * update * update * update minimap on brush and zoom * fix: restriction of minimap brush * refine minimap * update variable declaration * update minimap and mainchart * move minimap translate to minimap * combine some interface * add node detail drawer * move brush svg into minimap * chore: rename * chore: rename * fix: memorize node margin * chore: update node detail drawer * add thumbnail for tree digram * chore: update node detail * fix ci Co-authored-by: Suhaha <[email protected]> * fix: empty binary_plan * Analyze visual plan (#1320) * use protojson * fix * format json * set concurrency * init Duration * add diagnosticOperator * fix * fix * fix * Update provider.go * fix * fix * update ui * fix * fix go-lint * fix git diff --exit-code * fix git diff --exit-code * fix * add TestUseComparisonOperator * to circumvent golint v1.45.0 * fix stirngs.Cut * fix stirngs.Cut * fix: vp pseudo (#1321) * fix * fix * Support multi tree (#1324) * chore: support multi trees * fix: udpate multi tree * fix: add single tree * update multi trees * update multi trees * update multi trees * update multi trees * refactor: default node & link * refine: better fps * api: test * api: test * update node details * refine: minimap * style: update * refine: use memo to cache the component * chore: wrong usage * update thumbnail * update thumbnail * resolve comments * update variable get * chore: update thumbnail bound * update structure * fix ci * refine ts Co-authored-by: Suhaha <[email protected]> * add a new interface and fix some field parsing issues (#1325) * fix some field parsing issues * fix * fix * fix * fix go-lint * fix node detail label * add vp to statement detail page (#1326) * fix: compatibility on safari (#1327) * style: refine ui (#1332) * style: refine ui * update adjust position * update modal height * ci: fix lint * add unit tests (#1328) * add unit tests * fix * upgrade go.mod * refine visual plan (#1339) * refine visual plan * update translations * ci: fix lint * update i18n * ci: fix lint * use role tag (#1341) * use role tag * fix * fix * adjust execution plan UI position (#1342) * adjust execution plan UI position * chore: fix Execution plan tab * ci: fix lint * delete debug msg (#1345) * Add telemetry for vp (#1340) * refine visual plan * update translations * ci: fix lint * add telemetry for visual plan * update telemetry * ci: fix lint * ci: fix lint * delete: yarn.lock * fix unit test (#1351) Co-authored-by: Qiμ$hiЯuí <[email protected]> Co-authored-by: Suhaha <[email protected]> * Refine metrics plan (#1352) * chore: add color for specific sql type * update labels * refactor: customize series color * fix: database time series color * fix: database time series color * update query * refine: colors * update: colors Co-authored-by: Suhaha <[email protected]> * Update release version * update query name (#1354) * fix: fmt * fix null value (#1355) * fix null value * remove useless file Co-authored-by: Zhenchi <[email protected]> Co-authored-by: Sparkle <[email protected]> Co-authored-by: Yini Xu <[email protected]> Co-authored-by: baurine <[email protected]> Co-authored-by: Qiμ$hiЯuí <[email protected]>
pingcap · Jul 21, 2022 · cf16a71 · cf16a71
1 parent 1b89200
commit cf16a71
Show file tree

Hide file tree

Showing 752 changed files with 46,347 additions and 23,126 deletions.
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.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: |

diff --git a/.github/workflows/release.yaml b/.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

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.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
diff --git a/.github/workflows/upload-e2e-snapshots.yaml b/.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/**/*
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
@@ -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
diff --git a/Makefile b/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)

diff --git a/cmd/tidb-dashboard/main.go b/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"
 

diff --git a/etc/go.mod b/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