VTAdmin(web): Some tweaks in the workflow details

[beingnoble03]

Description

Some changes to the Workflow screen:

• For Reshard workflows: shows source/target shards in the header
• Capitalize Keyspace: from Target keyspace to Target Keyspace
• Make timestamps more compact to make the display denser, like. mm/dd/yy HH:MM:SS UTC. (no century, 24 hour format)
• Add the units (seconds) to the replication lag
• If more than 8 shards: don’t show logs for now.
• In streams, show the source shard and target shard, and add link to tablet.
• Remove Streams Table from the Lag Graph tab
• Remove "Scroll To Streams" from tabs other than "Details"
• Reduce space above the Summary caption

Related Issue(s)

• VTAdmin Workflow Details tab: incremental enhancements  #16687

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

[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.

[rohit-nayak-ps]

If you removed the Streams from the Lag tab, we can remove the Scroll To Streams link.

[beingnoble03]

Done. Also, pushed the changes to show "Scroll To Streams" only in case of Details Tab.

[mattlord]

❤️ Just a couple of minor nits/questions. VTAdmin is looking so useful now for VReplication workflows! I love it.

[mattlord]

I feel like we should have some sort of else condition here where we display something to indicate that we've elided the otherwise expected UI element / display content due to the larger number of shards?

[beingnoble03]

Done.

(PS: Used streams.length <= 1 just for the preview)

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 68.93%. Comparing base (d276007) to head (25a6fc7).
Report is 9 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #16706      +/-   ##
==========================================
+ Coverage   68.91%   68.93%   +0.02%     
==========================================
  Files        1565     1565              
  Lines      201605   201745     +140     
==========================================
+ Hits       138926   139067     +141     
+ Misses      62679    62678       -1     

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