Build and serve UI_NEXT

- Add new makefile for building ui_next - Add setting to toggle ui_next - Add URL path for displaying ui_next - Update collectstatic and template dir config to serve ui_next
2026-05-16 22:07:36 -02:30 · 2023-02-21 16:40:47 -05:00
parent 42c848b57b
commit f53aa2d26b
9 changed files with 227 additions and 6 deletions
--- a/awx/main/conf.py
+++ b/awx/main/conf.py
@@ -795,6 +795,16 @@ register(
    category_slug='bulk',
 )

+register(
+    'UI_NEXT',
+    field_class=fields.BooleanField,
+    default=False,
+    label=_('Enable Preview of New User Interface'),
+    help_text=_('Enable preview of new user interface.'),
+    category=_('System'),
+    category_slug='system',
+)
+

 def logging_validate(serializer, attrs):
    if not serializer.instance or not hasattr(serializer.instance, 'LOG_AGGREGATOR_HOST') or not hasattr(serializer.instance, 'LOG_AGGREGATOR_TYPE'):
--- a/awx/settings/defaults.py
+++ b/awx/settings/defaults.py
@@ -85,7 +85,11 @@ USE_L10N = True

 USE_TZ = True

-STATICFILES_DIRS = [os.path.join(BASE_DIR, 'ui', 'build', 'static'), os.path.join(BASE_DIR, 'static')]
+STATICFILES_DIRS = [
+    os.path.join(BASE_DIR, 'ui', 'build', 'static'),
+    os.path.join(BASE_DIR, 'ui_next', 'build'),
+    os.path.join(BASE_DIR, 'static'),
+]

 # Absolute filesystem path to the directory where static file are collected via
 # the collectstatic command.
@@ -299,7 +303,12 @@ TEMPLATES = [
            ],
            'builtins': ['awx.main.templatetags.swagger'],
        },
-        'DIRS': [os.path.join(BASE_DIR, 'templates'), os.path.join(BASE_DIR, 'ui', 'build'), os.path.join(BASE_DIR, 'ui', 'public')],
+        'DIRS': [
+            os.path.join(BASE_DIR, 'templates'),
+            os.path.join(BASE_DIR, 'ui', 'build'),
+            os.path.join(BASE_DIR, 'ui', 'public'),
+            os.path.join(BASE_DIR, 'ui_next', 'build', 'awx'),
+        ],
    },
 ]

@@ -1017,3 +1026,5 @@ AWX_MOUNT_ISOLATED_PATHS_ON_K8S = False

 # This is overridden downstream via /etc/tower/conf.d/cluster_host_id.py
 CLUSTER_HOST_ID = socket.gethostname()
+
+UI_NEXT = True
--- a/awx/ui_next/Makefile
+++ b/awx/ui_next/Makefile
@@ -0,0 +1,142 @@
+## UI_NEXT_MKFILE_PATH: Path to this Makefile
+UI_NEXT_MKFILE_PATH := $(abspath $(lastword $(MAKEFILE_LIST)))
+
+## UI_NEXT_DIR_ABS: Absolute path to the directory containing this Makefile
+UI_NEXT_DIR_ABS := $(dir $(UI_NEXT_MKFILE_PATH))
+
+## UI_NEXT_REL_DIR: Relative path to the directory containing this Makefile
+#  NOTE: UI_NEXT_REL_DIR swallowed the / because we want to be able to run `make src` from the ui_next dir
+UI_NEXT_REL_DIR := $(subst $(CURDIR)/,, $(UI_NEXT_DIR_ABS))
+
+## UI_NEXT_SRC_DIR: Path to the ui_next src directory
+UI_NEXT_SRC_DIR := $(UI_NEXT_REL_DIR)src
+
+## UI_NEXT_BUILD_DIR: Path to the ui_next build directory
+UI_NEXT_BUILD_DIR := $(UI_NEXT_REL_DIR)build
+
+## Path to your local clone of the UI_NEXT repo
+#  NOTE: This does not work with docker-compose development environment
+UI_NEXT_LOCAL ?=
+
+# Git repo and branch to the UI_NEXT repo
+UI_NEXT_GIT_REPO_SSH ?= git@github.com:ansible/ansible-ui.git
+UI_NEXT_GIT_REPO_HTTPS ?= https://github.com/ansible/ansible-ui.git
+UI_NEXT_GIT_BRANCH ?= main
+
+# awx-manage collect static require the awx/ui_next/build to exist
+# therefore we have to commit the build directory to source control
+# so that make docker-compose will be able to start up uwsgi
+# UI_NEXT_BUILT_FILE is here so that we can use it as the non-phony build target
+UI_NEXT_BUILT_FILE = $(UI_NEXT_REL_DIR).ui-built
+
+## Default target of this Makefile build the ui_next/build from source
+ui-next: ui_next/build
+
+.PHONY: ui_next/clone-https
+## Shallow clone the ui_next repo via https skip if UI_NEXT_GIT_REPO_HTTPS is undefined
+ui_next/clone-https:
+	@if [ -z "$(UI_NEXT_GIT_REPO_HTTPS)" ]; then \
+		echo "SKIP: ui_next/clone-https. UI_NEXT_GIT_REPO_HTTPS is not set."; \
+	elif [ -d $(UI_NEXT_SRC_DIR) ]; then \
+		echo "SKIP: ui_next/clone-https. $(UI_NEXT_SRC_DIR) already exists."; \
+	else \
+		git clone --depth 1 --branch $(UI_NEXT_GIT_BRANCH) $(UI_NEXT_GIT_REPO_HTTPS) $(UI_NEXT_SRC_DIR) || true; \
+	fi
+
+.PHONY: ui_next/clone-ssh
+## Shallow clone the ui_next repo via ssh.
+ui_next/clone-ssh:
+	@if [ -z "$(UI_NEXT_GIT_REPO_SSH)" ]; then \
+		echo "SKIP: ui_next/clone-ssh. UI_NEXT_GIT_REPO_SSH is not set."; \
+	elif [ -d $(UI_NEXT_SRC_DIR) ]; then \
+		echo "SKIP: ui_next/clone-ssh. $(UI_NEXT_SRC_DIR) already exists."; \
+	else \
+		git clone --depth 1 --branch $(UI_NEXT_GIT_BRANCH) $(UI_NEXT_GIT_REPO_SSH) $(UI_NEXT_SRC_DIR) || true; \
+	fi
+
+.PHONY: ui_next/link-local
+## Link to a existing local clone of ui_next repo. If method will not be able to build inside docker-compose environment
+ui_next/link-local:
+	@if [ -z "$(UI_NEXT_LOCAL)" ]; then \
+		echo "SKIP: ui_next/link-local. UI_NEXT_LOCAL is not set."; \
+	elif [ -d $(UI_NEXT_SRC_DIR) ]; then \
+		echo "SKIP: ui_next/link-local. $(UI_NEXT_SRC_DIR) already exists."; \
+	else \
+		ln -s $(UI_NEXT_LOCAL) $(UI_NEXT_SRC_DIR); \
+	fi
+
+.PHONY: ui_next/src
+## Try to link to a local clone of ui_next repo if it exist otherwise clone via ssh than https.
+ui_next/src:
+	@if [ -d $(UI_NEXT_SRC_DIR) ]; then \
+		echo "SKIP: ui_next. $(UI_NEXT_SRC_DIR) already exists."; \
+	else \
+		$(MAKE) ui_next/link-local ui_next/clone-ssh ui_next/clone-https; \
+	fi
+
+## Alias for ui_next, will not run if ui_next/src already exist
+$(UI_NEXT_SRC_DIR):
+	$(MAKE) ui_next/src
+
+## Alias for ui_next/build, will not run if ui_next/src/build already exist
+$(UI_NEXT_SRC_DIR)/build:
+	$(MAKE) ui_next/src/build
+
+.PHONY: ui_next/build
+## Build ui_next from source
+ui_next/src/build: $(UI_NEXT_SRC_DIR) $(UI_NEXT_SRC_DIR)/node_modules/webpack
+	@cd $(UI_NEXT_SRC_DIR) && npm run build:awx
+
+
+## Install webpack if does not exist.
+ui_next/src/node_modules/webpack: $(UI_NEXT_SRC_DIR)
+	@if [ -d $(UI_NEXT_SRC_DIR)/node_modules/webpack ]; then \
+		echo "SKIP: ui_next/src/node_modules/webpack. $(UI_NEXT_SRC_DIR)/node_modules/webpack already exists."; \
+	else \
+		cd $(UI_NEXT_SRC_DIR) && npm install webpack; \
+	fi
+
+## Alias for ui_next/src/node_modules/webpack. will not run if webpack already exist
+$(UI_NEXT_SRC_DIR)/node_modules/webpack:
+	$(MAKE) ui_next/src/node_modules/webpack
+
+## Copy ui_next/src/build to ui_next/build
+ui_next/build: ui_next/clean/build
+	$(MAKE) $(UI_NEXT_SRC_DIR)/build
+	@mkdir $(UI_NEXT_DIR_ABS)build && \
+	cp -r $(UI_NEXT_SRC_DIR)/build/awx $(UI_NEXT_DIR_ABS)build/awx &&\
+	touch $(UI_NEXT_BUILT_FILE)
+
+## Alias for ui_next/build. Will not run if .ui-built file already exist
+$(UI_NEXT_BUILT_FILE):
+	$(MAKE) ui_next/build
+
+## Alias for ui_next/build.
+.PHONY: $(UI_NEXT_BUILD_DIR)
+$(UI_NEXT_BUILD_DIR):
+	$(MAKE) ui_next/build
+
+.PHONY: $(UI_NEXT_REL_DIR)clean
+## Alias for ui_next/clean.
+$(UI_NEXT_REL_DIR)clean:
+	rm -rf $(UI_NEXT_SRC_DIR)
+	rm -rf $(UI_NEXT_BUILD_DIR)
+
+.PHONY: ui_next/clean
+## Clean ui_next
+ui_next/clean: ui_next/clean/build
+	rm -rf $(UI_NEXT_SRC_DIR)
+
+.PHONY: ui_next/clean/src
+## Clean ui_next src
+ui_next/clean/src:
+	rm -rf $(UI_NEXT_SRC_DIR)
+
+.PHONY: ui_next/clean/build
+## Clean ui_next build
+ui_next/clean/build:
+	rm -rf $(UI_NEXT_BUILD_DIR)
+	rm -rf $(UI_NEXT_BUILT_FILE)
+
+print-%:
+	@echo $($*)
--- a/awx/ui_next/README.md
+++ b/awx/ui_next/README.md
@@ -0,0 +1,33 @@
+# Instruction to build ui_next directly from this directory
+
+## Set src of the ui_next repo
+
+### via GIT
+
+```bash
+export UI_NEXT_GIT_BRANCH_REPO_HTTPS=https://<git repo>
+```
+
+or
+
+```bash
+export UI_NEXT_GIT_BRANCH_REPO_SSH=git@<git repo>
+```
+
+optionally set branch (default is main)
+
+```bash
+export UI_NEXT_GIT_BRANCH_BRANCH=main
+```
+
+### via symlink to existing clone
+
+```bash
+export UI_NEXT_LOCAL = /path/to/your/ui_next
+```
+
+## Build
+
+```bash
+make ui_next/build
+```
--- a/awx/ui_next/urls.py
+++ b/awx/ui_next/urls.py
@@ -0,0 +1,11 @@
+from django.urls import re_path
+from django.views.generic.base import TemplateView
+
+
+class IndexView(TemplateView):
+    template_name = 'index_awx.html'
+
+
+app_name = 'ui_next'
+
+urlpatterns = [re_path(r'^$', IndexView.as_view(), name='index')]
--- a/awx/urls.py
+++ b/awx/urls.py
@@ -9,6 +9,7 @@ from awx.main.views import handle_400, handle_403, handle_404, handle_500, handl

 urlpatterns = [
    re_path(r'', include('awx.ui.urls', namespace='ui')),
+    re_path(r'^ui_next/.*', include('awx.ui_next.urls', namespace='ui_next')),
    re_path(r'^api/', include('awx.api.urls', namespace='api')),
    re_path(r'^sso/', include('awx.sso.urls', namespace='sso')),
    re_path(r'^sso/', include('social_django.urls', namespace='social')),