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.

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

ui: new charts to statement details page #82426

Merged
merged 1 commit into from
Jun 9, 2022

Conversation

maryliag
Copy link
Contributor

@maryliag maryliag commented Jun 3, 2022

The overview for a statement details page now
shows charts instead of just the mean value for:

  • Execution and Planning Time
  • Rows Processed
  • Execution Retries
  • Execution Count
  • Contention

https://www.loom.com/share/2b6d0311e61a433d81ad37b8b62fba7d

Screen Shot 2022-06-06 at 6 14 41 PM

Screen Shot 2022-06-03 at 4 53 49 PM

Screen Shot 2022-06-03 at 4 54 02 PM

Fixes #74517

Release note (ui change): Statement Details page now shows charts
for: Execution and Planning Time, Rows Processed, Execution Retries,
Execution Count and Contention.

@maryliag maryliag requested a review from a team as a code owner June 3, 2022 20:54
@maryliag maryliag marked this pull request as draft June 3, 2022 20:54
@cockroach-teamcity
Copy link
Member

This change is Reviewable

@maryliag maryliag removed the request for review from a team June 3, 2022 20:54
@maryliag maryliag force-pushed the new-charts-details branch 8 times, most recently from d8b23ca to ccd8612 Compare June 7, 2022 15:23
@maryliag maryliag marked this pull request as ready for review June 7, 2022 15:23
@maryliag maryliag requested review from a team and Annebirzin June 7, 2022 15:23

stats.forEach(function(stat: statementStatisticsPerAggregatedTs) {
ts.push(TimestampToNumber(stat.aggregated_ts) * 1e3);
read.push(stat.stats.rows_read.mean);
Copy link
Contributor

Choose a reason for hiding this comment

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

Does this row need a 1e3 multiplier, too?

Copy link
Contributor

Choose a reason for hiding this comment

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

Or maybe the rows_written one, below, doesn't?

// by the Apache License, Version 2.0, included in the file
// licenses/APL.txt.

Object.defineProperty(window, "matchMedia", {
Copy link
Contributor

Choose a reason for hiding this comment

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

Maybe a comment about what this is / why it's here / how to use it?

Copy link
Contributor

@matthewtodd matthewtodd left a comment

Choose a reason for hiding this comment

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

LGTM other than those questions!

@maryliag maryliag force-pushed the new-charts-details branch from ccd8612 to ac31f24 Compare June 7, 2022 21:14
Copy link
Contributor Author

@maryliag maryliag left a comment

Choose a reason for hiding this comment

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

Reviewable status: :shipit: complete! 0 of 0 LGTMs obtained (waiting on @Annebirzin and @matthewtodd)


pkg/ui/workspaces/cluster-ui/src/statementDetails/timeseriesUtils.ts line 42 at r1 (raw file):

Previously, matthewtodd (Matthew Todd) wrote…

Or maybe the rows_written one, below, doesn't?

oops, this multiplier should not be there. Removed from below


pkg/ui/workspaces/cluster-ui/src/test-utils/matchMedia.mock.js line 11 at r1 (raw file):

Previously, matthewtodd (Matthew Todd) wrote…

Maybe a comment about what this is / why it's here / how to use it?

Comment added.
Regarding the "how to use it": once this file was added to the jest config file, there isn't anything else that needs to be done. If you create a new test that uses addEventListener for example, you wouldn't need to do anything to make it work, so I didn't add anything in particular about the usage in the comment. Let me know if looks good like this

@maryliag maryliag force-pushed the new-charts-details branch 2 times, most recently from 530f95b to 2d73fbf Compare June 8, 2022 13:39
@maryliag maryliag force-pushed the new-charts-details branch from 2d73fbf to 2e44786 Compare June 8, 2022 14:48
Copy link

@Annebirzin Annebirzin left a comment

Choose a reason for hiding this comment

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

This looks great! cc @kevin-v-ngo for visibility

@maryliag maryliag force-pushed the new-charts-details branch 2 times, most recently from a23cae3 to abea119 Compare June 8, 2022 17:47
The overview for a statement details page now
shows charts instead of just the mean value for:

- Execution and Planning Time
- Rows Processed
- Execution Retries
- Execution Count
- Contention

Fixes cockroachdb#74517
Fixes cockroachdb#81153

This commit also introduces mock for matchMedia and canvas
used for testing with jest.

Release note (ui change): Statement Details page now shows charts
for: Execution and Planning Time, Rows Processed, Execution Retries,
Execution Count and Contention.
@maryliag maryliag force-pushed the new-charts-details branch from abea119 to c3eda02 Compare June 9, 2022 13:20
@maryliag
Copy link
Contributor Author

maryliag commented Jun 9, 2022

bors r+

@craig
Copy link
Contributor

craig bot commented Jun 9, 2022

This PR was included in a batch that was canceled, it will be automatically retried

@craig
Copy link
Contributor

craig bot commented Jun 9, 2022

Build succeeded:

@craig craig bot merged commit e09ce91 into cockroachdb:master Jun 9, 2022
@blathers-crl
Copy link

blathers-crl bot commented Jun 9, 2022

Encountered an error creating backports. Some common things that can go wrong:

  1. The backport branch might have already existed.
  2. There was a merge conflict.
  3. The backport branch contained merge commits.

You might need to create your backport manually using the backport tool.


error creating merge commit from c3eda02 to blathers/backport-release-22.1-82426: POST https://api.github.com/repos/cockroachdb/cockroach/merges: 409 Merge conflict []

you may need to manually resolve merge conflicts with the backport tool.

Backport to branch 22.1.x failed. See errors above.


🦉 Hoot! I am a Blathers, a bot for CockroachDB. My owner is otan.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add bar charts to the Statements Details Overview page
4 participants