Argo: Support for base URL in new argo UI server

Created on 30 Jan 2020 · 2Comments · Source: argoproj/argo

Summary

Support for base URL in new argo UI server

Motivation

This was supported before v 2.5. Without this feature, deployment is limited to / route.

Proposal

Similar implementation to previous version (< 2.5). I tried to patch the base attribute in index.html via an nginx proxy, but changes are required within the UI code to get it to work correctly.

Message from the maintainers:

If you wish to see this enhancement implemented please add a 👍 reaction to this issue! We often sort issues this way to know what to prioritize.

bug regression

Source

fsiegmund

👍1

Most helpful comment

The base url was set before via BASE_HREF environment variable. If you switch to v2.4.3 repo and search for BASE_HREF you will find how it was used during deployment e.g. I was setting it to /ui/argo/ and created appropriate ingress and service rules, and also deployed an nginx reverse proxy for remapping API calls from the UI.

See https://github.com/argoproj/argo/issues/716

https://github.com/argoproj/argo-ui/commit/31c1a0a37e9e04a35b0a29ff325c51fa65d10587

Setting this variable resulted base element being set in index.html

<head>
    <meta charset="UTF-8">
    <title>Argo</title>
    <base href="/ui/argo/">

The reverse proxy has to remap /ui/argo/ to / e.g. for nginx:

location /ui/argo/ {
      auth_request /argo_auth;
      auth_request_set $auth_status $upstream_status;
      proxy_pass http://127.0.0.1:8001/;
}

argo-ui repo:
Dockerfile:

CMD node api/api/main.js --uiDist /app/app --inCluster ${IN_CLUSTER} --namespace ${ARGO_NAMESPACE} --force-namespace-isolation ${FORCE_NAMESPACE_ISOLATION} --instanceId ${INSTANCE_ID:-''} --enableWebConsole ${ENABLE_WEB_CONSOLE:-'false'} --uiBaseHref ${BASE_HREF:-'/'} --ip ${IP:-'0.0.0.0'} --port ${PORT:-'8001'}

app.ts:

const serveIndex = (req: express.Request, res: express.Response) => {
        fileToString(`${uiDist}/index.html`).then((content) => {
            return content.replace(`<base href="/">`, `<base href="${uiBaseHref}">`);
        })
        .then((indexContent) => res.send(indexContent))
        .catch((err) => res.send(err));
    };

I tried to patch index.html with same logic in reverse proxy, but something in the UI code for workflow route has changed that would display a wrong route in the browser. Navigation was working fine, but forcing the browser to refresh was broken.

fsiegmund on 30 Jan 2020

👍2

All 2 comments

Thank you. Can you point me to how you used to configure this please so I can ensure feature parity?

alexec on 30 Jan 2020