Use React hook to better deal with websockets

[ramondeklein]

The initial goal with this PR is to avoid that starting the tracing could be done more often (see #3283). It would have been possible to keep a boolean flag that the websocket was being opened. I think it would be more idiomatic to deal with this using React's built-in mechanisms.

It now uses the logActive state to determine whether the web-socket should be connected. It uses the wsUrl state to determine the actual URL. The URL is updated accordingly to the individual flags and filters. This would also allow to dynamically switch to another URL if the flags/filters are updated. This is now only blocked, because the HTML elements are disabled when tracing is active.

Using a web-socket in React works much better with the useWebSocket component. It also provides a built-in ping mechanism and supports typed responses (no need to unmarshal JSON in our code).

PS: Due to the change it's probably better to compare this side-by-side instead of unified diffing.

[ramondeklein]

@cesnietor @bexsoft @dvaldivia I could make these changes for other places where we use websocket too, but first I want to know if you agree with this solution...

[bayasdev]

@ramondeklein I like that the code looks more cleaner with the hook. I'm digging through the react-use-websocket source code and it seems to be using the native WebSocket API provided by JavaScript which is fine.

However, I still have some doubts about how we're going to integrate it in the rest of the application, specifically the object browser which currently uses a Redux middleware to update the local state with the WebSocket.

https://github.com/minio/console/blob/master/web-app/src/websockets/objectBrowserWSMiddleware.ts

[ramondeklein]

@bayasdev I haven't looked at the object browser yet. We may want to use the common code if that would fit better for that case. Not sure what middleware adds for an object browser. I typically use middleware to add authentication, logging, ... But I haven't taken a serious look.

react-use-websocket is a well-maintained and commonly used package. TBH, the use of server-side events would have been more appropriate here, but that would break the API.

I think the solution in the PR beats a naive fix that uses a boolean that disables the "start" button when it's clicked.

[prakashsvmx]

Tested. LGTM 👍