Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support metrics plan #1331

Merged
merged 13 commits into from
Jul 16, 2022
Merged

Support metrics plan #1331

merged 13 commits into from
Jul 16, 2022

Conversation

YiniXu9506
Copy link
Contributor

  • Show few TiDB metrics on overview list page.
  • Be able to see more TiDB metrics on overview detail page.

image

image

@ti-chi-bot
Copy link
Member

[REVIEW NOTIFICATION]

This pull request has not been approved.

To complete the pull request process, please ask the reviewers in the list to review by filling /cc @reviewer in the comment.
After your PR has acquired the required number of LGTMs, you can assign this pull request to the committer in the list by filling /assign @committer in the comment to help you merge this pull request.

The full list of commands accepted by this bot can be found here.

Reviewer can indicate their review by submitting an approval review.
Reviewer can cancel approval by submitting a request changes review.

@YiniXu9506 YiniXu9506 requested review from baurine and shhdgit July 14, 2022 09:07
baurine
baurine reviewed Jul 14, 2022
View reviewed changes
ui-new/packages/tidb-dashboard-lib/src/apps/Overview/components/Metrics.tsx
@@ -186,11 +80,18 @@ export default function Metrics() {
}
}

console.log('hello from Metrics ')
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's better to remove or comment.

baurine
baurine reviewed Jul 14, 2022
View reviewed changes
ui-new/packages/tidb-dashboard-lib/src/apps/Overview/components/MetricsItems.tsx
@@ -0,0 +1,398 @@
const MetricsItems = [
Copy link
Collaborator

@baurine baurine Jul 14, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not a component, it's a data or config, maybe better to put it in the data folder.

And it is true, some queries may only work for some certain tidb versions. We need to handle the compatibility issue later.

baurine
baurine reviewed Jul 14, 2022
View reviewed changes
ui-new/packages/tidb-dashboard-lib/src/apps/Overview/translations/zh.yaml
tikv_cpu_usage: TiKV CPU Usage
tikv_memory_usage: TiKV Memory Usage
tikv_io_mbps: TiKV IO MBps
tikv_storage_usage: TiKV Storage Usage
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems this is by design that we keep them in English, right?

baurine
baurine reviewed Jul 14, 2022
View reviewed changes
ui-new/packages/tidb-dashboard-lib/src/apps/Overview/components/Metrics.tsx
<Card noMarginTop noMarginBottom noMarginRight>
{MetricsItems.map((item, idx) => (
<>
{((idx > 1 && showAllPerformanceMetics) || idx < 2) && (
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe it is better to get available metric items outside render logic, for example:

const visibleMetricItems = useMemo(() => {
  return showAllPerformanceMetrics ? metricsItems : metricsItems.slice(0,2)
}, [metricsItems])

baurine
baurine reviewed Jul 14, 2022
View reviewed changes
ui-new/packages/tidb-dashboard-lib/src/apps/Overview/index.tsx
Comment on lines +18 to +19
<Route path="/overview" element={<List />} />
<Route path="/overview/detail" element={<Detail />} />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think these 2 pages are not List and Detail relationship, maybe Overview and Detail?

@baurine
Copy link
Collaborator

baurine commented Jul 14, 2022

2 unused vars:

packages/tidb-dashboard-lib dev: /Volumes/T7/codes/work/tidb-dashboard/ui-new/packages/tidb-dashboard-lib/src/components/MetricChart/index.tsx
packages/tidb-dashboard-lib dev:    27:3  warning  'PointerEvent' is defined but never used             @typescript-eslint/no-unused-vars
packages/tidb-dashboard-lib dev:   228:9  warning  'handleBrushEnd' is assigned a value but never used  @typescript-eslint/no-unused-vars

@baurine
Copy link
Collaborator

baurine commented Jul 14, 2022

the rest LGTM

@baurine
Copy link
Collaborator

baurine commented Jul 16, 2022

Merge it first, please address the comments with a new PR.

@baurine baurine merged commit 63517c7 into pingcap:make-ui-reusable Jul 16, 2022
@baurine
Copy link
Collaborator

baurine commented Jul 16, 2022

Related PR: https://github.com/tidbcloud/dbaas-ui/pull/939

baurine added a commit that referenced this pull request Jul 16, 2022
@baurine @YiniXu9506
refactor: split ui, make ui reusable (#1281)
e8c4fcc 
* 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 <2008.hbl@gmail.com>

Co-authored-by: Yini Xu <34967660+YiniXu9506@users.noreply.github.com>
@YiniXu9506 YiniXu9506 deleted the supportMetricsPlan branch July 17, 2022 02:39
shhdgit pushed a commit to shhdgit/tidb-dashboard that referenced this pull request Jul 20, 2022
@baurine @YiniXu9506 @shhdgit
refactor: split ui, make ui reusable (pingcap#1281)
08fa5e6 
* 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>
shhdgit added a commit that referenced this pull request Jul 21, 2022
@shhdgit @zhongzc
@baurine @YiniXu9506 @srstack
Release v2022.07.21.1 (#1353) [skip pd_pr]
cf16a71 
* 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 <2008.hbl@gmail.com>

Co-authored-by: Yini Xu <34967660+YiniXu9506@users.noreply.github.com>

* 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 <jklopsdfw@gmail.com>
Co-authored-by: baurine <2008.hbl@gmail.com>

* 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 <jklopsdfw@gmail.com>

* 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 <jklopsdfw@gmail.com>

* 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í <39378935+srstack@users.noreply.github.com>
Co-authored-by: Suhaha <jklopsdfw@gmail.com>

* 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 <jklopsdfw@gmail.com>

* Update release version

* update query name (#1354)

* fix: fmt

* fix null value (#1355)

* fix null value

* remove useless file

Co-authored-by: Zhenchi <zhongzc_arch@outlook.com>
Co-authored-by: Sparkle <1284531+baurine@users.noreply.github.com>
Co-authored-by: Yini Xu <34967660+YiniXu9506@users.noreply.github.com>
Co-authored-by: baurine <2008.hbl@gmail.com>
Co-authored-by: Qiμ$hiЯuí <39378935+srstack@users.noreply.github.com>
@YiniXu9506 YiniXu9506 mentioned this pull request Aug 1, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@baurine baurine baurine left review comments

@shhdgit shhdgit Awaiting requested review from shhdgit

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@YiniXu9506 @ti-chi-bot @baurine