Add ability to filter by socket id

[eliihen]

Figured I might as well start helping out :)

This PR adds a dropdown to main-toolbar which allows the user to filter the list of frames based on the connection ID of that frame. It is only visible when there is more than one active connection.

I read issue #30, and agree with @fflorent - I believe this is a better solution than using a # prefix. This is because it is immediately apparent to the user how to filter on ID, and there is no need to teach the user how to do so.

Fixes #30

[eliihen]

This fixed an issue of new frames not showing up when switching back to "No socket ID filter". I was not able to see any adverse effects of doing this, so I left it in.

[fflorent]

That's a great patch! Thanks @esphen :)

I just put some nits as comments and that question.

Florent

[eliihen]

All right, I pushed some tweaks. Have a look and tell me what you think :)

• Dropdown is now to the left of search box
• value !== null in webSocketSerialID filter (Because why not)
• Rewritten SearchBox to react and redux
• Styled the dropdown for dark themes

[fflorent]

Awesome!

Everything sounds good to me. Like you, I am a contributor of the project, so I let @janodvarko (the leader) officially review your patch.

Florent

[janodvarko]

@esphen Thanks for the patch!

I made comments inline.
I like the new Search box on top of ReactJS

There is one conflict when merging into the master (in the the main-toolbar comp), but it's simple to fix (componentDidMount and componentWillUnmount) should be removed (as you did in your patch).

Honza

[eliihen]

Thank you very much for the review and the feedback. I will have a look at your comments later today!

[eliihen]

@janodvarko Okay, I have merged with master, resolved conflicts and pushed the changes you requested. Two things I would like you to have a look at:

• I made the clear action reset the socket ID filter as well. This is because I believe it could be confusing for a user to be missing messages (and the filter dropdown) after clearing until they have two connections in their frames list again. Agree?
• I have updated the font to be like the other buttons' fonts, but please have a look at how they look on your computer. Linux and fonts have a troubled history.

[janodvarko]

Great work!

I have updated the font to be like the other buttons' fonts, but please have a look at how they look on your computer. Linux and fonts have a troubled history.

Looks good!

I made the clear action reset the socket ID filter as well. This is because I believe it could be confusing for a user to be missing messages (and the filter dropdown) after clearing until they have two connections in their frames list again. Agree?

I agree that it would be confusing for the user to miss messages.
But, could you keep the connection IDs in the list and the current selection? This way the drop down will always be there (even after Clear) and the user will see what the current filter value is all the time.

It has a side effect that closed connections will also be in the list and they only disappear after page reload. Later we'll ask for platform API that would give us list of current connections on the page, so we have a way to updated the list even if there are no messages.

Honza

[eliihen]

Thanks!

No problem. I'll persist the list of connection IDs in the dropdown as well as the selected filter across clears. Will push the tweaks by tomorrow.

[janodvarko]

Excellent

Honza

[eliihen]

@janodvarko: There we go, the list is now persisted across clears. I fully agree, this makes the experience a lot more logical from a user's point of view.

[janodvarko]

Thanks merging into the master, thanks!

After playing with this a bit, I think we should clear the list of connections in the filter + clear the filter selection when the page is reloaded. In other words keep the list persisted only across clears.

@esphen Would you be interested too look at this?

I created a new issue for this
#41

Honza