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

Remove highcharts dependency pt. 1 #15970

Merged
merged 23 commits into from
May 31, 2024

Conversation

notfelineit
Copy link
Contributor

@notfelineit notfelineit commented May 17, 2024

Description

This PR begins replacing highcharts with d3. We need to remove highcharts dependency because it does not meet licensing requirements for Vitess.

This PR removes the highcharts charts, and implements a bare minimum graph.

New graph:
CleanShot 2024-05-31 at 11 55 41@2x

Old graph:
image

Please see the "issue" section for what features are missing in this PR, compared to the old highcharts graphs.

Related Issue(s)

This PR addresses the following checkboxes of #16032 :

Remove highcharts

  • Remove all highcharts components
  • Uninstall highcharts

Feature parity

  • Shows all timeseries
  • Has customizable y axis units
  • Has on-hover legend
  • Can click legend and filter timeseries

Checklist

  • "Backport to:" labels have been added if this change should be back-ported to release branches
  • If this change is to be back-ported to previous releases, a justification is included in the PR description
  • Tests were added or are not required
  • Did the new or modified tests pass consistently locally and on CI?
  • Documentation was added or is not required

Deployment Notes

We won't reach parity with the highcharts in this PR. There will be subsequent PRs that implement the other features - the priority of this PR is to remove highcharts.

Signed-off-by: Frances Thai <notfelineit@gmail.com>
Copy link
Contributor

vitess-bot bot commented May 17, 2024

Review Checklist

Hello reviewers! 👋 Please follow this checklist when reviewing this Pull Request.

General

  • Ensure that the Pull Request has a descriptive title.
  • Ensure there is a link to an issue (except for internal cleanup and flaky test fixes), new features should have an RFC that documents use cases and test cases.

Tests

  • Bug fixes should have at least one unit or end-to-end test, enhancement and new features should have a sufficient number of tests.

Documentation

  • Apply the release notes (needs details) label if users need to know about this change.
  • New features should be documented.
  • There should be some code comments as to why things are implemented the way they are.
  • There should be a comment at the top of each new or modified test to explain what the test does.

New flags

  • Is this flag really necessary?
  • Flag names must be clear and intuitive, use dashes (-), and have a clear help text.

If a workflow is added or modified:

  • Each item in Jobs should be named in order to mark it as required.
  • If the workflow needs to be marked as required, the maintainer team must be notified.

Backward compatibility

  • Protobuf changes should be wire-compatible.
  • Changes to _vt tables and RPCs need to be backward compatible.
  • RPC changes should be compatible with vitess-operator
  • If a flag is removed, then it should also be removed from vitess-operator and arewefastyet, if used there.
  • vtctl command output order should be stable and awk-able.

@vitess-bot vitess-bot bot added NeedsBackportReason If backport labels have been applied to a PR, a justification is required NeedsDescriptionUpdate The description is not clear or comprehensive enough, and needs work NeedsIssue A linked issue is missing for this Pull Request NeedsWebsiteDocsUpdate What it says labels May 17, 2024
@github-actions github-actions bot added this to the v20.0.0 milestone May 17, 2024
Signed-off-by: Frances Thai <notfelineit@gmail.com>
Signed-off-by: Frances Thai <notfelineit@gmail.com>
Signed-off-by: Frances Thai <notfelineit@gmail.com>
Signed-off-by: Frances Thai <notfelineit@gmail.com>
Signed-off-by: Frances Thai <notfelineit@gmail.com>
Signed-off-by: Frances Thai <notfelineit@gmail.com>
@notfelineit notfelineit changed the title Replace Tablet QPS chart with d3 Remove highcharts dependency pt. 1 May 31, 2024
Signed-off-by: Frances Thai <notfelineit@gmail.com>
@notfelineit notfelineit added dependencies Pull requests that update a dependency file Component: VTAdmin VTadmin interface Component: web UI Type: Dependencies Dependency updates javascript Pull requests that update Javascript code and removed NeedsDescriptionUpdate The description is not clear or comprehensive enough, and needs work NeedsIssue A linked issue is missing for this Pull Request NeedsBackportReason If backport labels have been applied to a PR, a justification is required labels May 31, 2024
@notfelineit notfelineit self-assigned this May 31, 2024
@notfelineit notfelineit removed the NeedsWebsiteDocsUpdate What it says label May 31, 2024
Signed-off-by: Frances Thai <notfelineit@gmail.com>
@notfelineit notfelineit marked this pull request as ready for review May 31, 2024 19:13
@notfelineit notfelineit requested a review from ajm188 as a code owner May 31, 2024 19:13
@notfelineit
Copy link
Contributor Author

notfelineit commented May 31, 2024

I'll update the changelog in this PR as well, as well as update the old tests that reference old charts code.

Copy link
Contributor

@mattlord mattlord left a comment

Choose a reason for hiding this comment

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

I'm JS illiterate, but there are some linter warnings that we should address. It also seemed like we might have accidentally added an unnecessary/unwanted line in the package file.

web/vtadmin/package.json Outdated Show resolved Hide resolved
@@ -1,5 +1,5 @@
/**
* Copyright 2021 The Vitess Authors.
* Copyright 2024 The Vitess Authors.
Copy link
Contributor

Choose a reason for hiding this comment

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

I think this is fine, but we don't typically NEED to change the year when updating an existing file.

Copy link
Member

Choose a reason for hiding this comment

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

+1

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ah, that's good to know. I thought someone had told me that we needed to in the past (it may have just been for net-new files). I won't update them going forwards.

web/vtadmin/package.json Outdated Show resolved Hide resolved
Signed-off-by: Frances Thai <31225471+notfelineit@users.noreply.github.com>
@notfelineit
Copy link
Contributor Author

@mattlord I always intended to fix the linter issues 😄 my ask for review is for the structure and usage of the code.

Copy link

codecov bot commented May 31, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 68.25%. Comparing base (bec711b) to head (8427b0e).
Report is 2 commits behind head on main.

Current head 8427b0e differs from pull request most recent head 6c71610

Please upload reports for the commit 6c71610 to get more accurate results.

Additional details and impacted files
@@            Coverage Diff             @@
##             main   #15970      +/-   ##
==========================================
+ Coverage   68.23%   68.25%   +0.02%     
==========================================
  Files        1541     1541              
  Lines      197187   197168      -19     
==========================================
+ Hits       134546   134576      +30     
+ Misses      62641    62592      -49     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Signed-off-by: Frances Thai <31225471+notfelineit@users.noreply.github.com>
Copy link
Contributor

@iheanyi iheanyi left a comment

Choose a reason for hiding this comment

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

From a pass at it, it LGTM

Signed-off-by: Frances Thai <31225471+notfelineit@users.noreply.github.com>
@no-itsbackpack
Copy link

react changes look good to merge 🚀

Signed-off-by: Frances Thai <notfelineit@gmail.com>
Signed-off-by: Frances Thai <notfelineit@gmail.com>
Signed-off-by: Frances Thai <notfelineit@gmail.com>
Signed-off-by: Frances Thai <notfelineit@gmail.com>
Signed-off-by: Frances Thai <notfelineit@gmail.com>
Copy link
Contributor

@dgraham dgraham left a comment

Choose a reason for hiding this comment

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

⚡️

@@ -13,9 +13,9 @@
"@types/node": "^16.11.7",
"@types/react-router-dom": "^5.3.3",
"classnames": "^2.3.2",
"d3": "^7.9.0",
Copy link
Contributor

Choose a reason for hiding this comment

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

Maybe add @types/d3 too?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

✨ absolutely, TY

Signed-off-by: Frances Thai <notfelineit@gmail.com>
Copy link
Contributor

@mattlord mattlord left a comment

Choose a reason for hiding this comment

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

Thanks! ❤️

….tsx

Signed-off-by: Frances Thai <31225471+notfelineit@users.noreply.github.com>
notfelineit and others added 4 commits May 31, 2024 14:31
….tsx

Signed-off-by: Frances Thai <31225471+notfelineit@users.noreply.github.com>
Signed-off-by: Frances Thai <notfelineit@gmail.com>
Signed-off-by: Frances Thai <notfelineit@gmail.com>
Signed-off-by: Frances Thai <31225471+notfelineit@users.noreply.github.com>
@deepthi deepthi merged commit ab6c7af into vitessio:main May 31, 2024
94 checks passed
@deepthi deepthi deleted the remove-old-graph-library branch May 31, 2024 22:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: VTAdmin VTadmin interface Component: web UI dependencies Pull requests that update a dependency file javascript Pull requests that update Javascript code Type: Dependencies Dependency updates
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants