VTAdmin: Add advanced workflow switchtraffic options

[beingnoble03]

Description

This PR adds advanced workflow switch options in VTAdmin web. Also, a minor change: Reshard workflow can now be completed from VTAdmin itself.

Screenshots

Related Issue(s)

• VTAdmin: Enhance VReplication functionality in vtadmin UI #11690

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

[vitess-bot]

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.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 67.46%. Comparing base (19890cf) to head (b2bb42f).
Report is 75 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #17658      +/-   ##
==========================================
- Coverage   67.76%   67.46%   -0.31%     
==========================================
  Files        1585     1592       +7     
  Lines      255611   258158    +2547     
==========================================
+ Hits       173217   174166     +949     
- Misses      82394    83992    +1598     

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

[mattlord]

LGTM! The only thing is that initializeTargetSequences isn't a boolean.

Beyond that, I tried to do various manual tests locally to confirm behavior. Do we not currently have any testing infrastructure in place to test the web UI? Something like Selenium, Puppeteer, Cypress, etc? The more we use VTAdmin for operations that can cause data loss and downtime, the more critical this testing becomes (in the past it was for the most part a read-only view of the cluster).

[notfelineit]

Can you use tailwind styling here?

[beingnoble03]

Couldn't use tailwind for the containerStyle prop as it expects a CSSStyleDeclaration object, but I figured out it also has a prop called containerClassName which can use tailwind classes. So, used that instead.

[notfelineit]

You can add some tests for this component like: https://github.com/vitessio/vitess/blob/main/web/vtadmin/src/components/ReadOnlyGate.test.tsx

[mattlord]

LGTM! @beingnoble03 were you able to look into the test framework that @notfelineit mentioned? Not required, but it would be nice to have.

[notfelineit]

I was waiting on the test before final review 😄 The code so far looks good to me though!

[beingnoble03]

@beingnoble03 @notfelineit yeah, working on it. will add it by tomorrow for sure.

[beingnoble03]

pushed some unit tests for WorkflowActions please have a look, thanks!