Make ui_next the default UI (#15405)

Change django url dispatcher to serve up ui_next files instead of old ui files

Old UI will not be served with this change

Github CI still runs old ui tests (to be removed in another PR)

Remove the Github workflows that build old UI

---------

Signed-off-by: Seth Foster <fosterbseth@gmail.com>

.github/actions/run_awx_devel/action.yml

@@ -57,16 +57,6 @@ runs:
           awx-manage update_password --username=admin --password=password
         EOSH
 
-    - name: Build UI
-      # This must be a string comparison in composite actions:
-      # https://github.com/actions/runner/issues/2238
-      if: ${{ inputs.build-ui == 'true' }}
-      shell: bash
-      run: |
-        docker exec -i tools_awx_1 sh <<-EOSH
-          make ui-devel
-        EOSH
-
     - name: Get instance data
       id: data
       shell: bash

.github/workflows/devel_images.yml

@@ -62,18 +62,6 @@ jobs:
         run: |
           echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u ${{ github.actor }} --password-stdin
 
-      - name: Setup node and npm for old UI build
-        uses: actions/setup-node@v2
-        with:
-          node-version: '16'
-        if: matrix.build-targets.image-name == 'awx'
-
-      - name: Prebuild old-UI for awx image (to speed up build process)
-        run: |
-          sudo apt-get install gettext
-          make ui-release
-        if: matrix.build-targets.image-name == 'awx'
-
       - name: Setup node and npm for the new UI build
         uses: actions/setup-node@v2
         with:

.github/workflows/stage.yml

@@ -89,17 +89,6 @@ jobs:
         run: |
           cp ../awx-logos/awx/ui/client/assets/* awx/ui/public/static/media/
 
-      - name: Setup node and npm for old UI build
-        uses: actions/setup-node@v2
-        with:
-          node-version: '16'
-
-      - name: Prebuild old UI for awx image (to speed up build process)
-        working-directory: awx
-        run: |
-          sudo apt-get install gettext
-          make ui-release
-
       - name: Setup node and npm for new UI build
         uses: actions/setup-node@v2
         with:

CONTRIBUTING.md

@@ -67,7 +67,7 @@ If you're not using Docker for Mac, or Docker for Windows, you may need, or choo
 
 #### Frontend Development
 
-See [the ui development documentation](awx/ui/CONTRIBUTING.md).
+See [the ansible-ui development documentation](https://github.com/ansible/ansible-ui/blob/main/CONTRIBUTING.md).
 
 #### Fork and clone the AWX repo
 
@@ -121,7 +121,7 @@ If it has someone assigned to it then that person is the person responsible for
 
 **NOTES**
 
-> Issue assignment will only be done for maintainers of the project. If you decide to work on an issue, please feel free to add a comment in the issue to let others know that you are working on it; but know that we will accept the first pull request from whomever is able to fix an issue. Once your PR is accepted we can add you as an assignee to an issue upon request. 
+> Issue assignment will only be done for maintainers of the project. If you decide to work on an issue, please feel free to add a comment in the issue to let others know that you are working on it; but know that we will accept the first pull request from whomever is able to fix an issue. Once your PR is accepted we can add you as an assignee to an issue upon request.
 
 
 > If you work in a part of the codebase that is going through active development, your changes may be rejected, or you may be asked to `rebase`. A good idea before starting work is to have a discussion with us in the `#ansible-awx` channel on irc.libera.chat, or on the [mailing list](https://groups.google.com/forum/#!forum/awx-project).
@@ -132,7 +132,7 @@ If it has someone assigned to it then that person is the person responsible for
 
 At this time we do not accept PRs for adding additional language translations as we have an automated process for generating our translations. This is because translations require constant care as new strings are added and changed in the code base. Because of this the .po files are overwritten during every translation release cycle. We also can't support a lot of translations on AWX as its an open source project and each language adds time and cost to maintain. If you would like to see AWX translated into a new language please create an issue and ask others you know to upvote the issue. Our translation team will review the needs of the community and see what they can do around supporting additional language.
 
-If you find an issue with an existing translation, please see the [Reporting Issues](#reporting-issues) section to open an issue and our translation team will work with you on a resolution. 
+If you find an issue with an existing translation, please see the [Reporting Issues](#reporting-issues) section to open an issue and our translation team will work with you on a resolution.
 
 
 ## Submitting Pull Requests
@@ -161,7 +161,7 @@ Sometimes it might take us a while to fully review your PR. We try to keep the `
 When your PR is initially submitted the checks will not be run until a maintainer allows them to be. Once a maintainer has done a quick review of your work the PR will have the linter and unit tests run against them via GitHub Actions, and the status reported in the PR.
 
 ## Reporting Issues
- 
+
 We welcome your feedback, and encourage you to file an issue when you run into a problem. But before opening a new issues, we ask that you please view our [Issues guide](./ISSUES.md).
 
 ## Getting Help

Makefile

@@ -502,13 +502,7 @@ ui-test-general:
 	$(NPM_BIN) run --prefix awx/ui pretest
 	$(NPM_BIN) run --prefix awx/ui/ test-general --runInBand
 
-# NOTE: The make target ui-next is imported from awx/ui_next/Makefile
-HEADLESS ?= no
-ifeq ($(HEADLESS), yes)
 dist/$(SDIST_TAR_FILE):
-else
-dist/$(SDIST_TAR_FILE): $(UI_BUILD_FLAG_FILE) ui-next
-endif
 	$(PYTHON) -m build -s
 	ln -sf $(SDIST_TAR_FILE) dist/awx.tar.gz
 

awx/ui_next/Makefile

@@ -35,7 +35,7 @@ ui-next/src/build: $(UI_NEXT_DIR)/src/build/awx
 ## True target for ui-next/src/build. Build ui_next from source.
 $(UI_NEXT_DIR)/src/build/awx: $(UI_NEXT_DIR)/src $(UI_NEXT_DIR)/src/node_modules/webpack
 	@echo "=== Building ui_next ==="
-	@cd $(UI_NEXT_DIR)/src && PRODUCT="$(PRODUCT)" PUBLIC_PATH=/static/awx/ ROUTE_PREFIX=/ui_next npm run build:awx
+	@cd $(UI_NEXT_DIR)/src && PRODUCT="$(PRODUCT)" PUBLIC_PATH=/static/awx/ ROUTE_PREFIX=/ npm run build:awx
 	@mv $(UI_NEXT_DIR)/src/build/awx/index.html $(UI_NEXT_DIR)/src/build/awx/index_awx.html
 
 .PHONY: ui-next/src

awx/ui_next/urls.py

@@ -1,5 +1,3 @@
-from django.conf import settings
-from django.http import Http404
 from django.urls import re_path
 from django.views.generic.base import TemplateView
 
@@ -7,12 +5,6 @@ from django.views.generic.base import TemplateView
 class IndexView(TemplateView):
     template_name = 'index_awx.html'
 
-    def get_context_data(self, **kwargs):
-        if settings.UI_NEXT is False:
-            raise Http404()
-
-        return super().get_context_data(**kwargs)
-
 
 app_name = 'ui_next'
 

awx/urls.py

@@ -18,8 +18,6 @@ def get_urlpatterns(prefix=None):
         prefix = f'/{prefix}/'
 
     urlpatterns = [
-        re_path(r'', include('awx.ui.urls', namespace='ui')),
-        re_path(r'^ui_next/.*', include('awx.ui_next.urls', namespace='ui_next')),
         path(f'api{prefix}', include('awx.api.urls', namespace='api')),
     ]
 
@@ -36,6 +34,9 @@ def get_urlpatterns(prefix=None):
         re_path(r'^(?:api/)?500.html$', handle_500),
         re_path(r'^csp-violation/', handle_csp_violation),
         re_path(r'^login/', handle_login_redirect),
+        # want api/v2/doesnotexist to return a 404, not match the ui_next urls,
+        # so use a negative lookahead assertion here
+        re_path(r'^(?!api/|sso/).*', include('awx.ui_next.urls', namespace='ui_next')),
     ]
 
     if settings.SETTINGS_MODULE == 'awx.settings.development':

tools/ansible/roles/dockerfile/templates/Dockerfile.j2

@@ -4,6 +4,18 @@
 ### DO NOT EDIT
 ###
 
+{% if not headless|bool %}
+# UI_next build contaienr
+FROM quay.io/centos/centos:stream9 AS ui-next-builder
+USER root
+RUN dnf -y update && dnf install -y nodejs make git
+RUN npm install -g n && n 18
+
+COPY . /tmp/src/
+WORKDIR /tmp/src/
+RUN make ui-next
+{% endif %}
+
 # Build container
 FROM quay.io/centos/centos:stream9 AS builder
 
@@ -31,9 +43,6 @@ RUN dnf -y update && dnf install -y 'dnf-command(config-manager)' && \
     libffi-devel \
     libtool-ltdl-devel \
     make \
-{% if not headless|bool %}
-    nodejs \
-{% endif %}
     nss \
     openldap-devel \
     # pin to older openssl, see jira AAP-23449
@@ -74,21 +83,20 @@ RUN cd /tmp && make requirements_awx
 
 ARG VERSION
 ARG SETUPTOOLS_SCM_PRETEND_VERSION
-ARG HEADLESS
 
 {% if (build_dev|bool) or (kube_dev|bool) %}
 ADD requirements/requirements_dev.txt /tmp/requirements
 RUN cd /tmp && make requirements_awx_dev
 {% else %}
-# Use the distro provided npm to bootstrap our required version of node
-
-{% if not headless|bool %}
-RUN npm install -g n && n 16.13.1
-{% endif %}
 
 # Copy source into builder, build sdist, install it into awx venv
 COPY . /tmp/src/
 WORKDIR /tmp/src/
+
+{% if not headless|bool %}
+COPY --from=ui-next-builder /tmp/src/awx/ui_next/build /tmp/src/awx/ui_next/build
+{% endif %}
+
 RUN make sdist && /var/lib/awx/venv/awx/bin/pip install dist/awx.tar.gz
 
 {% if not headless|bool %}
@@ -189,7 +197,7 @@ COPY --from=builder /var/lib/awx /var/lib/awx
 
 RUN ln -s /var/lib/awx/venv/awx/bin/awx-manage /usr/bin/awx-manage
 
-{%if build_dev|bool %}
+{% if build_dev|bool %}
 COPY --from={{ receptor_image }} /usr/bin/receptor /usr/bin/receptor
 
 RUN openssl req -nodes -newkey rsa:2048 -keyout /etc/nginx/nginx.key -out /etc/nginx/nginx.csr \

tools/docker-compose/README.md

@@ -208,13 +208,25 @@ awx_1        |   Applying auth.0001_initial... OK
 
 ##### Clean and build the UI
 
+Prerequisites (on your local machine)
+- npm
+- nodejs
+
+Required versions listed here https://github.com/ansible/ansible-ui/blob/main/README.md
+
+On your local machine (not in awx container)
+
 ```bash
-$ docker exec tools_awx_1 make clean-ui ui-devel
+make clean/ui-next ui-next
 ```
 
-See [the ui development documentation](../../awx/ui/README.md) for more information on using the frontend development, build, and test tooling.
+This will clone the ansible-ui into the `awx/ui_next/src` directory and build the static files. Then when the containers come up, awx-manage collectstatic will copy those files into the proper place.
 
-Once migrations are completed and the UI is built, you can begin using AWX. The UI can be reached in your browser at `https://localhost:8043/#/home`, and the API can be found at `https://localhost:8043/api/v2`.
+You can also use `UI_NEXT_LOCAL` to build from a locally cloned ansible-ui repo.
+
+See [the ui development documentation](https://github.com/ansible/ansible-ui/blob/main/CONTRIBUTING.md) for more information on using the frontend development, build, and test tooling.
+
+Once migrations are completed and the UI is built, you can begin using AWX. The UI can be reached in your browser at `https://localhost:8043/`, and the API can be found at `https://localhost:8043/api/v2`.
 
 ##### Create an admin user
 
@@ -561,11 +573,11 @@ If you have a playbook like:
         var: the_secret_from_vault
 ```
 
-And run it through AWX with the credential `Credential From Vault via Token Auth` tied to it, the debug should result in `this_is_the_secret_value`. If you run it through AWX with the credential `Credential From Vault via Userpass Auth`, the debug should result in `this_is_the_userpass_secret_value`. 
+And run it through AWX with the credential `Credential From Vault via Token Auth` tied to it, the debug should result in `this_is_the_secret_value`. If you run it through AWX with the credential `Credential From Vault via Userpass Auth`, the debug should result in `this_is_the_userpass_secret_value`.
 
 ### HashiVault with LDAP
 
-If you wish to have your OpenLDAP container connected to the Vault container, you will first need to have the OpenLDAP container running alongside AWX and Vault. 
+If you wish to have your OpenLDAP container connected to the Vault container, you will first need to have the OpenLDAP container running alongside AWX and Vault.
 
 
 ```bash
@@ -574,7 +586,7 @@ VAULT=true LDAP=true make docker-compose
 
 ```
 
-Similar to the above, you will need to unseal the vault before we can run the other needed playbooks. 
+Similar to the above, you will need to unseal the vault before we can run the other needed playbooks.
 
 ```bash
 
@@ -582,7 +594,7 @@ ansible-playbook tools/docker-compose/ansible/unseal_vault.yml
 
 ```
 
-Now that the vault is unsealed, we can plumb the vault container now while passing true to enable_ldap extra var. 
+Now that the vault is unsealed, we can plumb the vault container now while passing true to enable_ldap extra var.
 
 
 ```bash
@@ -595,7 +607,7 @@ ansible-playbook tools/docker-compose/ansible/plumb_vault.yml -e enable_ldap=tru
 
 ```
 
-This will populate your AWX instance with LDAP specific items. 
+This will populate your AWX instance with LDAP specific items.
 
 - A vault LDAP Lookup Cred tied to the LDAP `awx_ldap_vault` user called `Vault LDAP Lookup Cred`
 - A credential called `Credential From HashiCorp Vault via LDAP Auth`  which is of the created type using the `Vault LDAP Lookup Cred` to get the secret.

tools/docker-compose/bootstrap_development.sh

@@ -23,8 +23,6 @@ else
     wait-for-migrations
 fi
 
-# Make sure that the UI static file directory exists, Django complains otherwise.
-mkdir -p /awx_devel/awx/ui/build/static
 
 # Make sure that the UI_NEXT statifc file directory exists, if UI_NEXT is not built yet put a placeholder file in it.
 if [ ! -d "/awx_devel/awx/ui_next/build/awx" ]; then