Merge pull request #13609 from TheRealHaoLiu/ui_next

WIP: ui-next build

.gitignore

@@ -161,3 +161,6 @@ use_dev_supervisor.txt
 /_build/
 /_build_kube_dev/
 /Dockerfile.kube-dev
+
+awx/ui_next/src
+awx/ui_next/build

MANIFEST.in

@@ -6,6 +6,7 @@ recursive-include awx/templates *.html
 recursive-include awx/api/templates *.md *.html *.yml
 recursive-include awx/ui/build *.html
 recursive-include awx/ui/build *
+recursive-include awx/ui_next/build *
 recursive-include awx/playbooks *.yml
 recursive-include awx/lib/site-packages *
 recursive-include awx/plugins *.ps1

Makefile

@@ -1,3 +1,5 @@
+-include awx/ui_next/Makefile
+
 PYTHON ?= python3.9
 DOCKER_COMPOSE ?= docker-compose
 OFFICIAL ?= no
@@ -447,7 +449,7 @@ HEADLESS ?= no
 ifeq ($(HEADLESS), yes)
 dist/$(SDIST_TAR_FILE):
 else
-dist/$(SDIST_TAR_FILE): $(UI_BUILD_FLAG_FILE)
+dist/$(SDIST_TAR_FILE): $(UI_BUILD_FLAG_FILE) awx/ui_next/build
 endif
 	$(PYTHON) -m build -s
 	ln -sf $(SDIST_TAR_FILE) dist/awx.tar.gz
@@ -495,8 +497,6 @@ docker-compose-sources: .git/hooks/pre-commit
 	    -e enable_prometheus=$(PROMETHEUS) \
 	    -e enable_grafana=$(GRAFANA) $(EXTRA_SOURCES_ANSIBLE_OPTS)
 
-
-
 docker-compose: awx/projects docker-compose-sources
 	$(DOCKER_COMPOSE) -f tools/docker-compose/_sources/docker-compose.yml $(COMPOSE_OPTS) up $(COMPOSE_UP_OPTS) --remove-orphans
 
@@ -590,7 +590,7 @@ awx-kube-dev-build: Dockerfile.kube-dev
 	    -t $(DEV_DOCKER_TAG_BASE)/awx_kube_devel:$(COMPOSE_TAG) .
 
 ## Build awx image for deployment on Kubernetes environment.
-awx-kube-build: Dockerfile
+awx-kube-build: Dockerfile awx/ui_next/src
 	DOCKER_BUILDKIT=1 docker build -f Dockerfile \
 		--build-arg VERSION=$(VERSION) \
 		--build-arg SETUPTOOLS_SCM_PRETEND_VERSION=$(VERSION) \
@@ -652,3 +652,11 @@ help/generate:
 	} \
 	{ lastLine = $$0 }' $(MAKEFILE_LIST) | sort -u
 	@printf "\n"
+
+## Display help for a specific target folder
+help/%:
+	@make -s help MAKEFILE_LIST="$*/Makefile"
+
+## Display help for a specific target folder
+help/%/aliases:
+	@make -s help/all MAKEFILE_LIST="$*/Makefile.aliases"

awx/settings/defaults.py

@@ -83,7 +83,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.
@@ -290,7 +294,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'),
+        ],
     },
 ]
 

awx/ui/src/screens/Dashboard/Dashboard.js

@@ -1,14 +1,16 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
-import { t } from '@lingui/macro';
+import { t, Trans } from '@lingui/macro';
 import {
+  Banner,
   Card,
   PageSection,
   Tabs,
   Tab,
   TabTitleText,
 } from '@patternfly/react-core';
+import { InfoCircleIcon } from '@patternfly/react-icons';
 
 import useRequest from 'hooks/useRequest';
 import { DashboardAPI } from 'api';
@@ -69,6 +71,15 @@ function Dashboard() {
   }
   return (
     <>
+      <Banner variant="info">
+        <Trans>
+          <p>
+            <InfoCircleIcon /> A tech preview of the new Ansible Automation
+            Platform user interface can be found{' '}
+            <a href="/ui_next/dashboard">here</a>.
+          </p>
+        </Trans>
+      </Banner>
       <ScreenHeader
         streamType="all"
         breadcrumbConfig={{ '/home': t`Dashboard` }}

awx/ui_next/Makefile

@@ -0,0 +1,101 @@
+UI_NEXT_MKFILE_PATH := $(abspath $(lastword $(MAKEFILE_LIST)))
+UI_NEXT_MKFILE_DIR := $(dir $(UI_NEXT_MKFILE_PATH))
+UI_NEXT_DIR := $(subst $(CURDIR)/,, $(UI_NEXT_MKFILE_DIR))
+
+# NOTE: UI_NEXT_DIR swallowed the / because we want to be able to run `make src` from the ui_next dir
+UI_NEXT_SRC_DIR := $(UI_NEXT_DIR)src
+UI_NEXT_BUILD_DIR := $(UI_NEXT_DIR)build
+
+# Path to your local clone of the UI_NEXT repo
+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
+
+
+.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.
+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 already exist
+$(UI_NEXT_SRC_DIR):
+	$(MAKE) ui_next/src
+
+.PHONY: ui_next/build
+## Build ui_next from source
+ui_next/src/build: ui_next/src
+	cd $(UI_NEXT_SRC_DIR) && \
+	npm install webpack && \
+	npm run build:awx
+
+.PHONY: ui_next/build
+## Copy ui_next/src/build to ui_next/build
+ui_next/build: ui_next/src/build
+	cp -r $(UI_NEXT_SRC_DIR)/build $(UI_NEXT_BUILD_DIR)
+
+## Alias for ui_next/build, will not run if build already exist
+$(UI_NEXT_BUILD_DIR):
+	$(MAKE) ui_next/build
+
+## Alias for ui_next/clean
+$(UI_NEXT_DIR)clean:
+	rm -rf $(UI_NEXT_DIR)/src
+	rm -rf $(UI_NEXT_DIR)/build
+
+.PHONY: ui_next/clean
+## Clean ui_next
+ui_next/clean: ui_next/clean/build
+	rm -rf $(UI_NEXT_DIR)/src
+
+.PHONY: ui_next/clean/src
+## Clean ui_next src
+ui_next/clean/src:
+	rm -rf $(UI_NEXT_DIR)/src
+
+.PHONY: ui_next/clean/build
+## Clean ui_next build
+ui_next/clean/build:
+	rm -rf $(UI_NEXT_DIR)/build
+
+print-%:
+	@echo $($*)

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
+```

awx/ui_next/urls.py

@@ -0,0 +1,32 @@
+from django.urls import re_path
+from django.utils.translation import gettext_lazy as _
+from django.views.generic.base import TemplateView
+
+from awx.main.utils.licensing import server_product_name
+
+
+class IndexView(TemplateView):
+    template_name = 'index_awx.html'
+
+
+# TODO: Hao fix this
+class MigrationsNotran(TemplateView):
+    template_name = 'installing.html'
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        product_name = server_product_name()
+        context['title'] = _('%s Upgrading' % product_name)
+        context['image_alt'] = _('Logo')
+        context['aria_spinner'] = _('Loading')
+        context['message_upgrade'] = _('%s is currently upgrading.' % product_name)
+        context['message_refresh'] = _('This page will refresh when complete.')
+        return context
+
+
+app_name = 'ui_next'
+
+urlpatterns = [
+    re_path(r'^$', IndexView.as_view(), name='index'),
+    re_path(r'^migrations_notran/$', MigrationsNotran.as_view(), name='migrations_notran'),
+]

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')),