Hubble UI Fails To Properly Render Within The Browser

[conradwt]

When working through the Getting Started documentation, it says that the port forwards would automatically be setup after executing cilium hubble ui. However, I'm seeing the following issue:

cilium hubble disable
cilium hubble enable --ui

✦ ➜ cilium hubble ui
❌ Unable to execute "kubectl port-forward -n kube-system svc/hubble-ui --address 127.0.0.1 12000:80":
 error: unable to forward port because pod is not running. Current status=Pending


Error: Unable to port forward: unable to execute "kubectl port-forward -n kube-system svc/hubble-ui --address 127.0.0.1 12000:80": exit status 1

After killing the processes by using the kill command and rerunning the cilium hubble ui, I'm seeing the following within the browser for the default namespace:

➜ cilium hubble ui
ℹ️  Opening "http://localhost:12000" in your browser...

Note: I didn't see any visual indicators that the port(s) has been forwarded with the above command but ps aux | grep hubble is showing the following line:

kubectl port-forward -n kube-system svc/hubble-ui --address 127.0.0.1 12000:80`

Finally, here's some additional information about my setup on macOS 14.3.1 (Apple Silicon):

➜ minikube version     
minikube version: v1.32.0

➜ cilium version         
cilium-cli: v0.15.23 compiled with go1.22.0 on darwin/arm64
cilium image (default): v1.15.0
cilium image (stable): v1.15.1
cilium image (running): 1.15.1

➜ hubble version
hubble 0.13.0 compiled with go1.21.6 on darwin/arm64

➜ k version        
Client Version: v1.29.2
Kustomize Version: v5.0.4-0.20230601165947-6ce0bf390ce3
Server Version: v1.29.2