VTAdmin(web): Initiate MoveTables workflow create screen

[beingnoble03]

Description

This PR adds a MoveTables workflow create screen to the VTAdmin. Borrows API changes from #16690.

Related Issue(s)

• VTAdmin: Enhance VReplication functionality in vtadmin UI #11690

Screenshots

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

Attention: Patch coverage is 4.00000% with 24 lines in your changes missing coverage. Please review.

Project coverage is 69.49%. Comparing base (9563fcb) to head (833ec80).
Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
go/vt/vtadmin/http/workflows.go	0.00%	14 Missing ⚠️
go/vt/vtadmin/api.go	9.09%	10 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #16707      +/-   ##
==========================================
- Coverage   69.52%   69.49%   -0.03%     
==========================================
  Files        1568     1568              
  Lines      202442   202467      +25     
==========================================
- Hits       140741   140701      -40     
- Misses      61701    61766      +65     

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

[rohit-nayak-ps]

Good start, tested a couple of happy flows and error checks and it worked well! Some changes needed:

Many of the controls are way bigger than they need to. We need to use multiple columns, to use space more efficiently. Also we should move the rarely used items to an Advanced section. See attached paper sketch for possibilities.

Misc:

• Make the Plus icon to create workflow larger, maybe 4x
• On hover the icon shows “change” instead of “Create”
• MoveTables is one word: not “Move Tables”. Change that everywhere
• There should be a title Create New MoveTables Workflow
• Select cluster by default if only one is present
• Don’t show External Cluster: it is related to Migrate workflows and needs a different UX flow
• Can we show the error in a popup?

[beingnoble03]

Removed md:-left-3full from here, not sure why this was added. Even for "bottom-right" position, the dropdown menu was rendered at "bottom-left". Please let me know if this was done intentionally, and this change needs to be reverted.

[beingnoble03]

We don't need position="bottom-right", as we want to render it on "bottom-left". But, with the dropdown fix we don't need to mention a position as by default dropdown menu renders on "bottom-left"

[rohit-nayak-ps]

Nice work! Requested a couple of minor verbiage changes.

[mattlord]

This is awesome! ❤️ I played around with it for a bit, my only thoughts are:

1. As Rohit noted, I think it makes sense to have a hidden (with expand option) for advanced options. And it should cover all of the remaining flags (not sure why e.g. we chose source time zone above others):

Flags:
  -a, --all-cells                          Copy table data from any existing cell.
      --all-tables                         Copy all tables from the source.
      --atomic-copy                        (EXPERIMENTAL) A single copy phase is run for all tables from the source. Use this, for example, if your source keyspace has tables which use foreign key constraints.
      --auto-start                         Start the workflow after creating it. (default true)
  -c, --cells strings                      Cells and/or CellAliases to copy table data from.
      --defer-secondary-keys               Defer secondary index creation for a table until after it has been copied.
      --exclude-tables strings             Source tables to exclude from copying.
  -h, --help                               help for create
      --no-routing-rules                   (Advanced) Do not create routing rules while creating the workflow. See the reference documentation for limitations if you use this flag.
      --on-ddl string                      What to do when DDL is encountered in the VReplication stream. Possible values are IGNORE, STOP, EXEC, and EXEC_IGNORE. (default "IGNORE")
      --remove-sharded-auto-increment      If moving the table(s) to a sharded keyspace, remove any auto_increment clauses when copying the schema to the target as sharded keyspaces should rely on either user/application generated values or Vitess sequences to ensure uniqueness. (default true)
      --shards strings                     (EXPERIMENTAL: Multi-tenant migrations only) Specify that vreplication streams should only be created on this subset of target shards. Warning: you should first ensure that all rows on the source route to the specified subset of target shards using your VIndex of choice or you could lose data during the migration.
      --source-keyspace string             Keyspace where the tables are being moved from.
      --source-shards strings              Source shards to copy data from when performing a partial MoveTables (experimental).
      --source-time-zone string            Specifying this causes any DATETIME fields to be converted from the given time zone into UTC.
      --stop-after-copy                    Stop the workflow after it's finished copying the existing rows and before it starts replicating changes.
      --tables strings                     Source tables to copy.
      --tablet-types strings               Source tablet types to replicate table data from (e.g. PRIMARY,REPLICA,RDONLY).
      --tablet-types-in-preference-order   When performing source tablet selection, look for candidates in the type order as they are listed in the tablet-types flag. (default true)
      --tenant-id string                   (EXPERIMENTAL: Multi-tenant migrations only) The tenant ID to use for the MoveTables workflow into a multi-tenant keyspace.

2. It would be great if we could have a hover over tooltip for each field that shows the same help output we have for the command-line flags. Source time zone is a good example as it's not clear at all what that means and why you might want to use it.

These improvements can be made in follow-up work though as this is just the initial work.

Thank you for this!

[rohit-nayak-ps]

Agree with your comments @mattlord. cc @beingnoble03

We just wanted to add a few flags now to avoid complicating the UI design. The aim of the initial PRs in vtadmin that Noble is working on is to get all basic functionality up with most frequently used features. Once that is done it will be easy for him, us or any one interested in OSS to quickly iterate/enhance since all the front-end and API plumbing will be ready.

Maybe once we have the first phase completed we can come up with UI ideas for improving each of the screens.

Good idea about the help text. It will be good if we can figure out a way to keep the help text in a common place so that we don't need have a redundant copy in vtadmin. We can start with cut/paste for now, so we are not blocked, and once we figure out a better way, migrate to that.

[beingnoble03]

@rohit-nayak-ps @mattlord Added the help text tooltips for the fields. Please have a look. Will add the other workflow options in follow-ups.

[mattlord]

@rohit-nayak-ps @mattlord Added the help text tooltips for the fields. Please have a look.

Looks perfect!

Will add the other workflow options in follow-ups.

Sounds good. Thanks!