Improve Search box UI and UX

[Danafrid]

Requirement - what kind of business use case are you trying to solve?

Improving the usability of the search in Jaeger, by unifying between the two tabs - saving the user an extra click and updating the UI.

Problem - what in Jaeger blocks you from solving the requirement?

Currently, there are several issues in the Search box UI:

• The search button is not prominent enough
• In order to upload a JSON file, the user has to navigate to a different tab inside the search
• The search fields can be grouped better (see min duration, max duration)
• Ui-wise the search can look lighter and not take as much vertical space, which is helpful when there are many results on the screen

Proposal - what do you suggest to solve the problem or improve the existing situation?

See attached proposal for the redesign - unifying between the search and upload functionalities, whilst keeping the drag and drop functionality - all in the same view. Also, a cleaner UI and a more prominent search button.

Before:

Suggested:

Screen.Recording.2021-01-24.at.13.17.47.mov

Would appreciate your thoughts on the proposal.

[meenal06]

Hi @jpkrohling , Can I work on this issue?

[jpkrohling]

It's yours!

[Danafrid]

Hi @meenal06, here is the file with the detailed UI design for this issue -
https://www.figma.com/file/GHuXn2IYWdSjYvYnFLkPeh/Jaeger-UI-Search?node-id=0%3A1

[meenal06]

Hi @jpkrohling , I have edited the layout according to the sigma designs however there are several complication with using dragNdrop inscribed under the SearchForm of which one major is that with every click in the search form antd would perform two tasks one of taking input and other of opening the file-upload which is the default method added into the dragger widget.
However the following can work if we may remove the dragger altogether and replace it with just a upload widget on which user can click to upload.

Let me know what do you think on this!

[jpkrohling]

Click to upload sounds fine to me, but perhaps @rubenvp8510 has a different idea?

[rubenvp8510]

Due the limitations I see, I think click to upload sounds like a good approach, or may be delimit the area of dragNdrop to no overlap with the form could work for this case?

[meenal06]

Due the limitations I see, I think click to upload sounds like a good approach, or may be delimit the area of dragNdrop to no overlap with the form could work for this case?

Yes the later is achievable I hope so!

[rubenvp8510]

Due the limitations I see, I think click to upload sounds like a good approach, or may be delimit the area of dragNdrop to no overlap with the form could work for this case?

Yes the later is achievable I hope so!

For now it's ok with the click approach, we might want to think about the dragNdrop region later :)