Hubble baseUrl with Gateway and HTTPRoute

[ayashjorden]

Hello,
After a few attempts of asking for help in Cilium Slack #hubble channel, posting my issue here.
This is part of my private homelab setup.
I have a 3-node cluster, provisioned using k0s, k8s 1.32. Cilium 1.18.0, kubeProxyReplacement=true.

Excerpt of my Hubble values from the Helm values:

hubble:
  relay:
    enabled: true
  ui:
    enabled: true
    baseUrl: "/cilium/hubble/" # per the docs, baseUrl requires a trailing slash

Gateway resource

#$ Used in:
#$ - site-src/guides/multiple-ns.md
apiVersion: gateway.networking.k8s.io/v1
kind: Gateway
metadata:
  name: shared-gateway
  namespace: infra
  labels:
    color: blue
  annotations:
    cert-manager.io/cluster-issuer: "homelab-ca-issuer"
spec:
  gatewayClassName: cilium
  listeners:
  - name: https
    hostname: "homelab.local"
    protocol: HTTPS
    port: 443
    allowedRoutes:
      namespaces:
        from: Selector
        selector:
          matchLabels:
            shared-gateway-access: "true"
    tls:
      mode: Terminate
      certificateRefs:
      - name: homelab-local

And a HTTPRoute in the kube-system NS

#$ Used in:
#$ - site-src/guides/multiple-ns.md
apiVersion: gateway.networking.k8s.io/v1
kind: HTTPRoute
metadata:
  name: hubble-ui
  namespace: kube-system
spec:
  parentRefs:
  - name: shared-gateway
    namespace: infra
    sectionName: https
  hostnames:
  - homelab.local
  rules:
  - matches:
    - path:
        type: PathPrefix
        value: /cilium/hubble
    backendRefs:
    - name: hubble-ui
      port: 80

While it seems that I can hit https://homelab.local/cilium/hubble, lhe app does not load, as the resources are still loaded from / , attaching screenshots
When I use cilium hubble ui command (which uses port-forward I assume), the UI still loads under /.
Does anyone spot any misconfiguration in the above?

I was able to make some progress by setting baseUrl: "/cilium-hubble/" (use hyphen instead of slash and add a trailing slash.
Sources are loading, but I'm getting a React error that there's no route to "/cilium-hubble/" (edited)

The dev-tools console report the error below:

wS {status: 404, statusText: 'Not Found', internal: true, data: 'Error: No route matches URL "/cilium/hubble/"', error: Error: No route matches URL "/cilium/hubble/"

and

Error: No route matches URL "/cilium/hubble/"
    at rE (https://homelab.local/cilium/hubble/bundle.main.d3dae0fa32e1af6f7354.js:2:1034293)
    at DS (https://homelab.local/cilium/hubble/bundle.main.d3dae0fa32e1af6f7354.js:2:1003607)
    at QK (https://homelab.local/cilium/hubble/bundle.main.d3dae0fa32e1af6f7354.js:2:1517101)
    at va (https://homelab.local/cilium/hubble/bundle.main.d3dae0fa32e1af6f7354.js:2:235399)
    at Eu (https://homelab.local/cilium/hubble/bundle.main.d3dae0fa32e1af6f7354.js:2:294340)
    at bl (https://homelab.local/cilium/hubble/bundle.main.d3dae0fa32e1af6f7354.js:2:283592)
    at ml (https://homelab.local/cilium/hubble/bundle.main.d3dae0fa32e1af6f7354.js:2:283520)
    at vl (https://homelab.local/cilium/hubble/bundle.main.d3dae0fa32e1af6f7354.js:2:283383)
    at ol (https://homelab.local/cilium/hubble/bundle.main.d3dae0fa32e1af6f7354.js:2:278548)
    at S (https://homelab.local/cilium/hubble/bundle.main.d3dae0fa32e1af6f7354.js:2:313867)

The sources tab shows some sources under the specified baseUrl while other sources under the root path /

Appreciate any insight or guidance.

EDIT:
I've set baseUrl back to the default /. and deployed a HTTPRoute with no matching, only backendRefs.
Hubble loads on https://homelab.local and works as expected.
Not sure what is wrong with my configuration above.

[dverzolla]

Did you try to set host as http header?

[ayashjorden]

Did you try to set host as http header?

Hi
Should I really need to set the host header when accessing the dashboard via a browser?
Do you want me to try again using curl?

What configuration would result in accessing the dashboard on /some-path prefix, and how the HTTPRoute would need to be configured?

[dverzolla]

Should I really need to set the host header when accessing the dashboard via a browser?

It depends on how the backend is configured, if it's expecting host header, so you need it.

I use a lot HTTPRoutes, not with hubble ui though. But you should respect (or at least fake) the request that is going downstream.