testkube: Unable to use non-root path for dashboard

Describe the bug The testkube dashboard is not available when the ingress path is not /

To Reproduce Steps to reproduce the behavior: Using the testkube Helm Chart

Set values

testkube-dashboard:
  enabled: true
  ingress:
    enabled: true
    hosts:
      - myhost.example.com
    path: /test-svc

Deploy the chart
Access http://myhost.example.com/test-svc
Observe blank page. The app is loaded, but receives a 404 attempting to load env-config.js (and other files) and therefore does not recognise the non-root path.

Expected behavior Expected app to load, as it does when configured for the domain root path

Version / Cluster

Which testkube version? 1.8.8
What Kubernetes cluster? EKS
What Kubernetes version? 1.22

Screenshots

Additional context This issue was raised previously https://github.com/kubeshop/testkube/issues/2362 and code was added, but I don’t see how the code can function since it sets values in env-config.js which the app attempts to download from the root.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 1
Comments: 23 (13 by maintainers)

Commits related to this issue

fix: allow non-root path for the static server Resolves: kubeshop/testkube#2952 — committed to kubeshop/testkube-dashboard by rangoo94 a year ago
fix: allow non-root path for the dashboard (#761) * fix: allow non-root path for the static server * fixup allow non-privileged user to run the Docker container Relates to: kubeshop/testkube#2952 — committed to kubeshop/testkube-dashboard by rangoo94 a year ago
Release/v1.13.0 (#763) * feat: allow providing initial state for stores (#712) * Triggers multi-view layout (#700) * triggers multi view ui * adjusted creation form and validation * delet... — committed to kubeshop/testkube-dashboard by vsukhin a year ago
fix: Avoid absolute "/" path for files, to make <base href> working Relates to: kubeshop/testkube#2952 — committed to kubeshop/testkube-dashboard by rangoo94 a year ago
fix: Avoid absolute "/" path for files, to make <base href> working (#766) Relates to: kubeshop/testkube#2952 — committed to kubeshop/testkube-dashboard by rangoo94 a year ago
fix: always use / on end of <base href> Relates to: kubeshop/testkube#2952 — committed to kubeshop/testkube-dashboard by rangoo94 a year ago
fix: always use / on end of <base href> (#792) Relates to: kubeshop/testkube#2952 — committed to kubeshop/testkube-dashboard by rangoo94 a year ago

Most upvoted comments

I had to override the REACT_APP_ROOT_ROUTE

This is the only method working for us too and it looks like this is the only method that will work.

This would be due to the configuration of nginx: https://github.com/kubeshop/testkube-dashboard/blob/develop/nginx/nginx.conf#L30

So despite React now constructing URLs correctly, when Ingress forwards a request to the backend nginx server hosting the React app we get:

Scenario 1: URL rewrite

  extraEnvVars:
    - name: REACT_APP_ROOT_ROUTE
      value: /my/path
  ingress:
    annotations:
      nginx.ingress.kubernetes.io/rewrite-target: /$2
    # note: this pattern handles /my/path or /my/path/ or /my/path/<foo>
    path: /my/path(/|$)(.*)

user request:

ingress -> nginx
/my/path -> /

REACT_APP_ROOT_ROUTE=/my/path results in <base href="/my/path/"> due to https://github.com/kubeshop/testkube-dashboard/blob/develop/scripts/inject-base-href.sh

Any URLs constructed by React reflect the path in the browser.

Result: This works because nginx serves the Single Page App from the root without any visibility to the browser URL. That’s fine, but it’s inconvenient to configure both the path and the env var.

Scenario 2: No URL rewrite: What seems like it should work, but doesn’t

  ingress:
    path: /my/path

ingress -> nginx
/my/path -> /my/path

REACT_APP_ROOT_ROUTE=/my/path results in <base href="/my/path/"> due to https://github.com/kubeshop/testkube-dashboard/blob/develop/scripts/inject-base-href.sh

Any URLs constructed by React reflect the path in the browser.

Result: Blank white page, because nginx is configured to serve index.html for any requests that don’t match an existing file:

        location / {
            root /usr/share/nginx/html;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

So the requests for any URL except/my/path/index.html also receives index.html as the response. So none of the static assets are served.

To work around this by modifying nginx.conf is non-trivial. You can’t just change location / { because you’d need a rewrite for the path as well as the try_files… it’s beyond my nginx-fu.

hobti01 on Jul 31, 2023

The hotfix has been released in the newest version, you may run testkube upgrade command to install the latest version. Sorry for the inconvenience, this time I have verified it twice 👍

rangoo94 on Jul 10, 2023

The fix has landed in v1.13.0. You may run testkube upgrade command to install the latest version.

rangoo94 on Jul 10, 2023

Hi! Thanks for your patience.

The new Testkube version has been released, and it will always keep trailing / to the <base href>, which should solve the issue with ingress without trailing slash.

rangoo94 on Jul 21, 2023

Sure I understand your response, but if ‘/’ is added to the ingress then /my/path will not work and users must specify /my/path/ in order to get a response, which is not a great experience.

hobti01 on Jul 19, 2023

@rangoo94 it’s the absolute links in the html which defeat the base href

<!doctype html>
<html lang="en">
    <head>
        <base href="/test-svc">
        <meta charset="utf-8"/>
        <link rel="icon" href="/favicon.png"/> <------ 404
        <meta name="viewport" content="width=device-width,initial-scale=1"/>
        <meta name="description" content="The Kubernetes Native Test Orchestration and Execution Framework"/>
        <meta name="referrer" content="no-referrer"/>
        <meta name="app-version" content="1.13.0"/>
        <link rel="preconnect" href="https://fonts.googleapis.com"/>
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
        <link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Mono&display=swap" as="style" onload='this.onload=null,this.rel="stylesheet"'/>
        <link rel="manifest" href="/manifest.json"/> <------ 404
        <title>Testkube</title>
        <script src="/env-config.js"></script> <------ 404
        <script defer="defer" src="/static/js/main.abaf16d5.js"></script> <------ 404
        <link href="/static/css/main.e325d506.css" rel="stylesheet"> <------ 404
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
    </body>
</html>

hobti01 on Jul 10, 2023

Hi @Carlosgova! Sorry, just tested it once again and it’s actually not working. I should fix it shortly though 👍

rangoo94 on Jul 10, 2023

Hi @djonesz! Unfortunately, we didn’t touch it yet. We will discuss it today to provide some estimations.

rangoo94 on Jun 27, 2023

Looking at the UI code, this bug may be solved by adding appropriate <base> tag for the front-end should solve all/most of the problems.

rangoo94 on May 12, 2023