Replace Octant plugin with React web UI

[antoninbas]

Describe what you are trying to solve

Octant is no longer maintained. Therefore, we should stop investing any further effort into the Antrea Octant plugin, and we should look for an alternative.
On a side note, it seems that there could be a security risk associated with the way in which we run Octant (as a K8s Pod): vmware-archive/octant#3370

IMO, this is a good thing, as the Octant-based solution was never very useful:

• not well-integrated / easy to run
• the Octant API for plugins kept getting changed, leading to deployment issues in case of version mismatch between Octant and the Antrea Octant plugin (typically, the most recent version of Octant could not be used with the most recent version of Antrea)
• messy dependency management in the plugin go.mod file: the plugin was its own Go module with a dependency on Antrea and a dependency on Octant, both of these modules having a dependency on some version of the K8s modules. It was hard to keep dependencies working and required replace directives in the go.mod
• not extensible in a way that could provide additional user value: really the only useful capability was Traceflow, and it wasn't worth deploying Octant for (if you needed Traceflow, you could use the antctl CLI or the K8s APIs)

In the words of 1 Reddit user:

The only thing I'd b**** about is, it [Antrea] is meant to integrate with Octant - but Octant it absolutely f***ing useless, and offers zero value... The monitoring feature in Cilium is far more useful.

Describe the solution you have in mind

I suggest that we deprecate and remove the Octant plugin from Antrea, and replace it with a custom web UI.
Below is a screenshot of something I have built using React. Obviously it is just a start, and we could start small and improve over time. Unlike with Octant, it is easy to build functionality & value over time with a custom web UI:

Traceflow is just a place to start, we could expose metrics and flow visibility data:

We could also support executing NetworkPolicy recommendation jobs from the UI.

Describe how your solution impacts user flows

IMO, it should be built into Antrea and we should keep it as simple as possible.
We need an extra container which can server the frontend React App, and process API calls from the frontend. This container can be run as its own Deployment or can be included in the antrea-controller Pod.

For a typical user, the steps will be as follows:

1. deploy the Antrea UI (if separate Deployment, otherwise it can be part of the antrea-controller Pod by default)
2. run kubectl port-forward <svc name> 8080:<svc port> to expose the Antrea UI locally
3. visit localhost:8080 in browser to access the UI

Describe the main design/architecture of your solution

We need to define some authentication mechanism for Antrea UI APIs. Could be password-based (similar to Grafana) or use a K8s bearer token? If the latter, we need to provide a convenient way for users to retrieve a token.

Alternative solutions that you considered

From an API perspective, there are multiple options. The current solution is a custom HTTP API server (part of the Antrea UI container) which in the case of Traceflow will translate the API call into a Custom Resource. Theoretically, the frontend could also access K8s APIs directly, but accessing K8s APIs from the browser is not a common scenario (except when using kubectl proxy). Some UI features (e.g., Network Visibility) require a custom API anyway.

[vicky-liu]

Thanks Antonin, + @xliuxu to evaluate the UI solutions.

[antoninbas]

@vicky-liu @xliuxu to clarify, I have already implemented a PoC using React + Clarity, with support for Traceflow. I will be presenting it at the community meeting on Monday. I'd be happy to discuss possible UI alternatives at the meeting.

[ahrkrak]

Just dropping a pointer to the Headlamp K8s UI project here: https://www.headlamp.dev/ - it has support for plugins, and has been submitted to CNCF for Sandbox. The team is in the #headlamp channel in Kubernetes slack if you want to connect.

[antoninbas]

@ahrkrak I appreciate the pointer. I am a bit wary of the plugin model (bad experience with Octant), because breaking API changes can be very painful and it's hard to know ahead of time whether the plugin framework will cover all your use cases. I can see the Headlamp plugin framework as being valuable if you have some CRDs and for which you want to provide a web page, or if you want to customize an existing resource page. However, all the plugin examples are pretty simple, and we have some advanced needs for the Antrea UI. In particular, we need to have a custom backend that can call different APIs (K8s / Antrea APIs).

It's not clear to me that Headlamp supports customizing the backend, or non-K8s APIs.

[ahrkrak]

Makes sense. Just wanted to make sure you're aware of it.
I think you're right that plug-ins are FE only - you'd have to write a separate backend service currently.

[antoninbas]

Antrea UI v0.1.0 is out (https://github.com/antrea-io/antrea-ui/releases/tag/v0.1.0), and the Octant plugin is deprecated in Antrea v1.12. Only remaining item for this issue is to remove the Octant plugin altogether post v1.12.0 release.

[antoninbas]

Closing this issue. The Antrea Octant plugin has been removed from the code base.