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
 

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 %}

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
 

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