If browser not set to a locale with strings, templated text appears

[adpavlov]

ISSUE TYPE

• Bug Report

SUMMARY

ENVIRONMENT

• AWX version: 16.0.0
• AWX install method: docker on linux
• Ansible version: 2.9.15
• Operating System: macOS 11.0.1
• Web Browser: Firefox, Safari, Edge, Opera

STEPS TO REPRODUCE

Upgrade AWX to 16.0.0

EXPECTED RESULTS

Normal UI

ACTUAL RESULTS

Some elements are not decoded properly

ADDITIONAL INFORMATION

[unlikelyzero]

@adpavlov try:

make clean-ui
make ui-devel

[adpavlov]

@adpavlov try:

make clean-ui
make ui-devel

Sorry, not sure I know where to issue those commands. I'm using docker image from dockerhub, not building it myself.
Same installation works fine from windows based browsers.

[jakemcdermott]

@adpavlov

Do you see any errors in the browser console on page load? (Cmd + Opt + J, I believe)

[adpavlov]

@adpavlov

Do you see any errors in the browser console on page load? (Cmd + Opt + J, I believe)

nothing except insecure protocol warning.
And this is what I see in web inspector

<h2 class="pf-c-title pf-m-3xl">Welcome to Ansible {brandName}! Please Sign In.</h2>
vs windows browsing
<h2 class="pf-c-title pf-m-3xl">Welcome to Ansible AWX! Please Sign In.</h2>

[jakemcdermott]

@adpavlov

We weren't able to reproduce this using the default install settings and mac os 10.15.7:

We'll try and find a box with macos 11+ and double-check. That said, have you made any kind of change to the installer, configs, deployment, etc. that might help us reproduce this?

[adpavlov]

No, the only changes are replaced awx zip file and container itself

[jakemcdermott]

No, the only changes are replaced awx zip file and container itself

Hmmm.. Are you referring to the downloadable .zip release from github?

What version did you upgrade from? Did the version you're upgrading from have any installer changes? What steps / shell commands did you run for the upgrade.

[adpavlov]

yes, just replaced zip and docker tar.gz from which I import from 15.0.1 to 16.0.0. This is the flow that I do from like version 8 I believe.
Playbook to deploy is quite big, but in general I'm just doing following:

1. Import updated awx-16.0.0.tar.gz container
2. Extract awx.zip
3. Stop awx
4. Start awx with ansible-playbook -i inventory install.yml

[FloMeyer]

I can confirm this issue.

Running on Ubuntu 20.04.1 LTS in docker container.

Upgraded using:
mv awx awx_15.0.1
git clone https://github.com/ansible/awx.git
cp awx_15.0.1/awx/installer/inventory /root/awx/installer/inventory
cd /root/awx/installer
ansible-playbook -i inventory install.yml

Also settings page is not working correctly:


Alter reloading settings page by Ctrl+Shift+R the page is working:

Applications and Credentials Types pages have also problems:

[jakemcdermott]

This is starting to look like upgrades are a factor. Can you post logs from the browser network tab? Which browser are you using?

[jakemcdermott]

Have you modified the nginx config any? That'll help narrow this down.

[jakemcdermott]

Also, which installation method? (docker or k8s)?

[adpavlov]

as for me I tried Safari, Firefox, Edge.
no configuration changes for nginx.
installation with docker.

[FloMeyer]

Loading of the login page looks okay in the network tab:

Loading of the settings page gives the error:

The Reponse headers look the same in both cases (settings page loading or not)

I run awx inside docker:
docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
b7bff49f8dae ansible/awx:16.0.0 "/usr/bin/tini -- /u…" 16 hours ago Up 15 hours 8052/tcp awx_task
0d2b934a5966 ansible/awx:16.0.0 "/usr/bin/tini -- /b…" 16 hours ago Up 15 hours 0.0.0.0:8080->8052/tcp awx_web
fdd71a8e946c portainer/portainer-ce "/portainer" 2 weeks ago Up 15 hours 0.0.0.0:8000->8000/tcp, 0.0.0.0:9000->9000/tcp portainer
95df930c0780 redis "docker-entrypoint.s…" 3 weeks ago Up 15 hours 6379/tcp awx_redis
7093b2f905d5 postgres:10 "docker-entrypoint.s…" 3 weeks ago Up 15 hours 5432/tcp awx_postgres

I did not modify the nginx config.

[FloMeyer]

Dont know if its worth to metion: I am logging in via LDAP.

[FloMeyer]

This is my inventory file for installation.
inventory.txt

[alexandrovas]

I can confirm this issue on fresh installation in docker-compose (Ubuntu 18.04 LTS)

Tested in Chrome and Safari on MacOS 10.15.7

Login page:

Jobs:

[jakemcdermott]

Thanks for the info, everyone. So far, the common factor between all of these occurrences seems to be the docker compose installation method - this helps us know where to look first.

[adpavlov]

Issue narrowed down to localization. I have system language set to Russian. Changed priority in firefox settings to accept en first and AWX showing everything fine now.
[upd] issue relevant not for Mac only, but windows as well.

[lemmy04]

is there any way to get one's browser to do english only for one url, and one's "normal" language for anything else?

[lemmy04]

wouldn't the easiest / most logical solution be just to fall back to english if the browser asks for a locale without strings?

[jakemcdermott]

Yes - In previous versions, the ui would default to a locale with strings (e.g: en) if none of the browser's preferred languages have translation strings available in the catalog.

Currently, the ui always tries to use the browser's preferred locale, even if there aren't any translation strings available for that locale in the catalog. This is problematic because if there aren't any strings available, you'll just see the raw javascript variables.

To address this bug, we'll update the client so that it retains the behavior from previous versions.

[jakemcdermott]

👋 Hello, everyone.

Thanks for all of the helpful information you provided.

We've created a patch for this bug and it will be included in the next AWX release.

[lemmy04]

i would like to say at this point that I find the new UI much more pleasing, especially on a phone or similar.

[unlikelyzero]

To test:
Update corner-cases.spec.js with a test to switch the browser to russian and load the dashboard or login screen using a test similar to https://github.com/ansible/tower-qa/blob/05ab4b72a5ac2ccae4fcb8a4acaa2b795db88be4/ui-tests/awx-pf-tests/cypress/visualintegration/translation.spec.js#L14-L25

[unlikelyzero]

Coverage added

[JAndritsch]

Edit: My problem was that I needed to run npm run extract-strings and then npm run compile-strings before npm run build.

I'm currently seeing this issue on 17.0.1.

My browser is set to English. The fix from the merge above appears in this version of the code. When I run the UI in development mode via npm start, translations work fine. However, when I create a production bundle via npm run build and load it in the browser I see variable names in the strings.

For some transparency, I'm building my own production bundle of the UI because I need to customize it. Once built, I copy the UI build into a Docker image based on ansible/awx:17.0.1, which overrides the UI code shipped with that image. Everything works except for translations that have variables.

[redtux]

We've created a patch for this bug and it will be included in the next AWX release.

👋🏼 Hi, I am having the described issue on AWX v16, and wanted to ask whether there are plans to backport this patch.

I am seeing the issue on an Ubuntu 22.04 using Gnome with Chrome Version 106.0.5249.119 (Official Build) (64-bit) and English locale. Firefox and other browsers work fine.