feat(cli): add scrolling, sorting and filtering to vector top

[esensar]

Summary

This adds new features requested in #24337:

• scrolling with arrow keys (by line or by page, or top/bottom)
• sorting by any of the columns
• filtering by id, kind or type
• help menu for new keybinds

The default keybinds were partly inspired by htop, the usual keybinds (arrows) and the usual vim keybinds.
Filtering input is very basic - it doesn't support moving cursor around, only writing / deleting one character at a time. I couldn't justify adding a whole new complex component or a crate for a single input field.

Vector configuration

This is just a basic configuration, with many repeated components, to test scrolling, sorting and filtering:

api:
  enabled: true

sources:
  demo_logs_test:
    type: "demo_logs"
    format: "json"

  demo_logs_test2:
    type: "demo_logs"
    format: "json"
  demo_logs_test3:
    type: "demo_logs"
    format: "json"
  # ... repeat many times

transforms:
  demo_logs_processor:
    type: "remap"
    inputs: ["demo_logs_test"]
    source: |
      . = parse_json!(.message)

  demo_logs_processor2:
    type: "remap"
    inputs: ["demo_logs_test2"]
    source: |
      . = parse_json!(.message)
  # ... repeat many times
  
sinks:
  console:
    inputs: ["demo_logs_processor"]
    target: "stdout"
    type: "console"
    encoding:
      codec: "json"

  console2:
    inputs: ["demo_logs_processor2"]
    target: "stdout"
    type: "console"
    encoding:
      codec: "json"
  
  # ... repeat many times

How did you test this PR?

Ran Vector with the above configuration and ran vector top separately. ? can be used to show the help window with all the keybinds for scrolling, sorting and filtering. vector top --help can be used to show the newly added CLI arguments, to start up with sort/filter options.

Change Type

• Bug fix
• New feature
• Non-functional (chore, refactoring, docs)
• Performance

Is this a breaking change?

• Yes
• No

Does this PR include user facing changes?

• Yes. Please add a changelog fragment based on our guidelines.
• No. A maintainer will apply the no-changelog label to this PR.

References

• Closes: Additional features for "vector top" #24337

Notes

• Please read our Vector contributor resources.
• Do not hesitate to use @vectordotdev/vector to reach out to us regarding this PR.
• Some CI checks run only after we manually approve them.
  • We recommend adding a pre-push hook, please see this template.
  • Alternatively, we recommend running the following locally before pushing to the remote branch:
    • make fmt
    • make check-clippy (if there are failures it's possible some of them can be fixed with make clippy-fix)
    • make test
• After a review is requested, please avoid force pushes to help us review incrementally.
  • Feel free to push as many commits as you want. They will be squashed into one before merging.
  • For example, you can run git merge origin master and git push.
• If this PR introduces changes Vector dependencies (modifies Cargo.lock), please
  run make build-licenses to regenerate the license inventory and commit the changes (if any). More details here.

---

Sponsored by Quad9

[esensar]

Here is a recording of this feature, for easier review:

[esensar]

@vectordotdev/vector just checking if this can get reviewed. I know #24364 was mentioned in the issue as a possible conflict, but I don't this these 2 affect each other. Any conflict that arises should be trivial to solve.

[thomasqueirozb]

Very nice! Thanks for this. Just a few minor things to be addressed improved.

Additionally, do you think it is possible to add some kind of indicator that we're filtering by a column? I was thinking of something like ID (filter) and having filter be in yellow. This is just an idea of course. Right now we have no indication that we're filtering or not and this would be nice to have since the components just "disappear" right now.

We could also add some indication that we're sorting but that is less important than the filtering indicator.

FYI I really enjoy having the / as a keybind to quickly filter components :)

Additional note: I checked for merge conflicts with that other PR and this one doesn't seem to touch any files in common so we should be good to merge without worrying about conflicts.

[esensar]

Very nice! Thanks for this. Just a few minor things to be addressed improved.

Thanks!

Additionally, do you think it is possible to add some kind of indicator that we're filtering by a column? I was thinking of something like ID (filter) and having filter be in yellow. This is just an idea of course. Right now we have no indication that we're filtering or not and this would be nice to have since the components just "disappear" right now.

That sounds good. I can play around with it for a bit.

We could also add some indication that we're sorting but that is less important than the filtering indicator.

There is already an indication for sorting (https://github.com/vectordotdev/vector/pull/24355/changes#diff-bfd3603fead9464708657861b2ab35789a27a03e089982109c13f40e8c2c34c6R229) - the column header gets highlighted.

FYI I really enjoy having the / as a keybind to quickly filter components :)

I am glad - I tried to cover the most common keybinds one would expect out of a tool like this.

Additional note: I checked for merge conflicts with that other PR and this one doesn't seem to touch any files in common so we should be good to merge without worrying about conflicts.

Yeah, I thought that was the case, because I really just worked with the UI code.

[esensar]

I have settled for /{filter}/ suffix to filtered column - I am hoping that this format will also make it a bit clearer that used filter value is used as a regex pattern.

[esensar]

@thomasqueirozb I think I have covered all of the comments. Let me know if this looks alright.

[thomasqueirozb]

Tested locally after changes and everything seems to be right, including CLI flags. Everything looks good, thanks!