Introducing tech preview of the new AWX UI #13660

TheRealHaoLiu · 2023-03-08T00:51:57Z

SUMMARY

Makefile file and make targets for pulling in and build new UI from https://github.com/ansible/ansible-ui
Add banner switch between old UI and new UI
Add new setting UI_NEXT to enable/disable new UI
Add new config to display the setting for UI_NEXT (for non-admin)
Add new path /ui_next to access the new UI

ISSUE TYPE

New or Enhanced Feature

COMPONENT NAME

API
UI
Other

AWX VERSION

awx: 21.13.1.dev30+ge18a755f6b

TEST SCENARIOS

Test environment: fedora 37 VM setup using https://github.com/TheRealHaoLiu/fedora-setup/tree/main
docker-compose related tests:
🟢 able to start API server without building ui or ui-next in docker-compose development environment (verify via access to /api/v2/ping)
🟢 able to build ui and ui-next on machine directly (verified via make ui-devel && make ui-next)
🟢 able to build ui and ui-next in docker-compose development environment (ui-next src from git)
🟢 after building ui without building ui-next with settings.UI_NEXT enabled verified that the placehold index page show up (telling people that UI_NEXT was not built yet)
🟢 after building ui and ui-next collectstatic is able to collect the static files successfully and ui show up

kube build related tests:
🟢 able to build awx with make awx-kube-build and old and new UI appears successfully (with spud logo)
🟢 CI feature branch built image function as expected with both old and new UI appear successfully (with spud logo)

release build related tests:
🟢 moc stage job was able to successfully build and push the moc release image https://github.com/ansible/awx/actions/runs/4443351332/jobs/7800534464
🟢 deployment using the image generated by stage CI job produced image is successful both old and new ui function (with AWX logo)

Function related tests:
🟢 /ui_next show 404 when settings.UI_NEXT = False
🟢 banner on old UI for switching to new UI does not appear when settings.UI_NEXT = False
🟢 banner on old UI for switching to new UI appear for normal user when settings.UI_NEXT = True

awx/main/conf.py

awx/ui/src/screens/Setting/shared/data.allSettingOptions.json

fosterseth

pulled it down and tested out the instructions in the readme. Was able to build new UI successfully, navigate to new UI, and tested out the banner functionality to flip between old and new UI

Co-Authored-By: kialam <2293210+kialam@users.noreply.github.com>

- 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

- Add ui_next to /api/v2/config - enable banner to show up for normal user since /api/v2/settings is only available to admin users

…ame variable in tech preview banner.

john-westcott-iv · 2023-03-17T15:20:40Z

In the blue banner in UI Next it references Ansible Automation Platform should that be changed to AWX for community stuff?

john-westcott-iv · 2023-03-17T15:21:57Z

I had awx running and then did make ui-next and ended up with a blank screen until I redid make docker-compose-build && make docker-compose. Is that expected? I'm thinking yes because the index file was there to serve the HTML but collectstatic needs to be re-run to pickup all of the additional files. If thats accurate can we add it to whatever build documentation we are going to (hopefully) add?

tools/docker-compose/bootstrap_development.sh

Makefile

awx/ui_next/Makefile

- move placeholder index_awx.html out of ui_next build dir - copy index_awx.html to build dir during development bootstrap if UI_NEXT has not been build

- they were all PHONY to start with and also all target are written to be rerun able

kialam · 2023-03-20T19:22:49Z

In the blue banner in UI Next it references Ansible Automation Platform should that be changed to AWX for community stuff?

Yes, those changes have already been made.

kialam · 2023-03-20T19:24:26Z

When you turn on/off the setting in the UI settings page and then go back to the dashboard view the message does not toggle until you do a full reload of the page. Is there a way to have it re-check if the header should be on/off on a dashboard load?

It would require another API call to get /config in order to refresh the banner. The banner doesn't auto update unless a refresh is called for now, but can revisit this.

cypress · 2023-03-21T04:47:20Z

9 failed tests on run #14699 ↗︎

9	123	13	0	0

Details:

Add note to indicate ui-next is imported target
Project: AWX - Functional	Commit: `b89dcaeb8d`
Status: Failed	Duration: 09:51 💡
Started: Mar 21, 2023 4:46 PM	Ended: Mar 21, 2023 5:56 PM

components/ace-editor.cy.js • 1 failed test

View Output Video

Test		Artifacts
Visual Testing - AceEditor JSON Formatting > Verify that JSON is formatted properly with whitespace regardless of entry format		`Output` `Screenshots` `Video`

components/modals.cy.js • 1 failed test

View Output Video

Test		Artifacts
Visual Testing - Add/Delete Modals > delete modal is displayed correctly with dependency warning		`Output` `Screenshots` `Video`

screens/dashboard/dashboard.cy.js • 1 failed test

View Output Video

Test		Artifacts
Dashboard > Recent Dashboard Jobs		`Output` `Screenshots` `Video`

screens/execution-environments/execution-environment.cy.js • 1 failed test

View Output Video

Test		Artifacts
Execution Environment - List, details and edit > EE list, details and edit		`Output` `Screenshots` `Video`

screens/inventories/smart-inventory.cy.js • 1 failed test

View Output Video

Test		Artifacts
Smart Inventories > Smart Inventory add form		`Output` `Screenshots` `Video`

The first 5 failed specs are shown, see all 9 specs in Cypress Cloud.

_{This comment has been generated by cypress-bot as a result of this
project's GitHub integration settings.}

TheRealHaoLiu · 2023-03-21T17:09:29Z

.gitignore

@@ -157,7 +157,11 @@ use_dev_supervisor.txt
 *.unison.tmp
 *.#
 /awx/ui/.ui-built
+/awx/ui_next/.ui-built


remove this line that file is no longer needed

also cleanup some small things

github-actions bot added component:api component:ui labels Mar 8, 2023

TheRealHaoLiu force-pushed the feature_ui-next branch from 27f8f1a to 6fbc58f Compare March 13, 2023 16:22

TheRealHaoLiu mentioned this pull request Mar 15, 2023

Moves brand logos and favicon to /static/media url ansible/ansible-ui#297

Merged

mabashian force-pushed the feature_ui-next branch from bb5e1d4 to a7b87ce Compare March 16, 2023 19:05

fosterseth reviewed Mar 17, 2023

View reviewed changes

awx/main/conf.py Outdated Show resolved Hide resolved

gamuniz approved these changes Mar 17, 2023

View reviewed changes

fosterseth reviewed Mar 17, 2023

View reviewed changes

awx/ui/src/screens/Setting/shared/data.allSettingOptions.json Outdated Show resolved Hide resolved

fosterseth approved these changes Mar 17, 2023

View reviewed changes

TheRealHaoLiu requested a review from jjwatt March 17, 2023 03:06

TheRealHaoLiu assigned TheRealHaoLiu and unassigned TheRealHaoLiu Mar 17, 2023

Add banner to dashboard page.

42c848b

Co-Authored-By: kialam <2293210+kialam@users.noreply.github.com>

TheRealHaoLiu force-pushed the feature_ui-next branch 4 times, most recently from 89c8c60 to a3f4916 Compare March 17, 2023 03:33

TheRealHaoLiu and others added 6 commits March 16, 2023 23:34

Build and serve UI_NEXT

f53aa2d

- 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

Adds UI bits for new UI_NEXT system setting

d137086

Add ui_next to /api/v2/config

229dbe0

- Add ui_next to /api/v2/config - enable banner to show up for normal user since /api/v2/settings is only available to admin users

Only show tech preview banner when config.ui_next is true. Use brandN…

41a4551

…ame variable in tech preview banner.

Fix use of brandName

4f2f345

throw 404 when UI_NEXT false

b75b098

TheRealHaoLiu force-pushed the feature_ui-next branch from a3f4916 to 21a97dc Compare March 17, 2023 03:34

TheRealHaoLiu and others added 5 commits March 16, 2023 23:37

Refine UI_NEXT Makefile and update README

edbed92

make dev-env test pass

ae0d868

Adds missing mock for fetching the brand name

3636c5e

Fix brandname in banner.

c30760a

add new UI icons

48a04bf

TheRealHaoLiu force-pushed the feature_ui-next branch from 21a97dc to 48a04bf Compare March 17, 2023 03:37

Adding default index_awx.html incase user forgets to build ui-next

fa3920d

john-westcott-iv reviewed Mar 17, 2023

View reviewed changes

tools/docker-compose/bootstrap_development.sh Outdated Show resolved Hide resolved

Commit .po files.

f558957

jjwatt approved these changes Mar 17, 2023

View reviewed changes

Makefile Show resolved Hide resolved

awx/ui_next/Makefile Show resolved Hide resolved

awx/ui_next/Makefile Show resolved Hide resolved

awx/ui_next/Makefile Show resolved Hide resolved

TheRealHaoLiu force-pushed the feature_ui-next branch from 2446bda to f67171c Compare March 20, 2023 17:00

TheRealHaoLiu added 3 commits March 20, 2023 14:05

Move placeholder index_awx.html out of build dir

8d47644

- move placeholder index_awx.html out of ui_next build dir - copy index_awx.html to build dir during development bootstrap if UI_NEXT has not been build

PHONY all UI_NEXT build target

d1895bb

- they were all PHONY to start with and also all target are written to be rerun able

fail UI_NEXT make src if variable not set

cd6cb33

TheRealHaoLiu force-pushed the feature_ui-next branch from f67171c to bc7599d Compare March 20, 2023 18:06

TheRealHaoLiu marked this pull request as ready for review March 20, 2023 18:12

TheRealHaoLiu changed the title ~~[WIP] Introducing the new AWX UI~~ Introducing the new AWX UI Mar 20, 2023

john-westcott-iv approved these changes Mar 21, 2023

View reviewed changes

TheRealHaoLiu commented Mar 21, 2023

View reviewed changes

Zokormazo approved these changes Mar 21, 2023

View reviewed changes

rooftopcellist approved these changes Mar 21, 2023

View reviewed changes

akus062381 approved these changes Mar 21, 2023

View reviewed changes

TheRealHaoLiu added 3 commits March 21, 2023 13:43

Update UI_NEXT README

5bd00ad

also cleanup some small things

Update UI_NEXT help text in UI

39ea162

Add note to indicate ui-next is imported target

746cd4b

TheRealHaoLiu force-pushed the feature_ui-next branch from b89dcae to 746cd4b Compare March 21, 2023 17:43

TheRealHaoLiu changed the title ~~Introducing the new AWX UI~~ Introducing tech preview of the new AWX UI Mar 21, 2023

TheRealHaoLiu mentioned this pull request Mar 21, 2023

AWX Community Meeting Agenda - Apr 11 2023 #13687

Closed

TheRealHaoLiu merged commit 6908f41 into devel Mar 21, 2023

TheRealHaoLiu deleted the feature_ui-next branch March 21, 2023 18:09

adpavlov mentioned this pull request Apr 7, 2023

Allow for running AWX at non-root path (URL prefixing) #13821

Open

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Introducing tech preview of the new AWX UI #13660

Introducing tech preview of the new AWX UI #13660

TheRealHaoLiu commented Mar 8, 2023 •

edited

fosterseth left a comment

john-westcott-iv commented Mar 17, 2023

john-westcott-iv commented Mar 17, 2023 •

edited

kialam commented Mar 20, 2023

kialam commented Mar 20, 2023

cypress bot commented Mar 21, 2023 •

edited

TheRealHaoLiu Mar 21, 2023

Introducing tech preview of the new AWX UI #13660

Introducing tech preview of the new AWX UI #13660

Conversation

TheRealHaoLiu commented Mar 8, 2023 • edited

SUMMARY

ISSUE TYPE

COMPONENT NAME

AWX VERSION

TEST SCENARIOS

fosterseth left a comment

Choose a reason for hiding this comment

john-westcott-iv commented Mar 17, 2023

john-westcott-iv commented Mar 17, 2023 • edited

kialam commented Mar 20, 2023

kialam commented Mar 20, 2023

cypress bot commented Mar 21, 2023 • edited

9 failed tests on run #14699 ↗︎

TheRealHaoLiu Mar 21, 2023

Choose a reason for hiding this comment

TheRealHaoLiu commented Mar 8, 2023 •

edited

john-westcott-iv commented Mar 17, 2023 •

edited

cypress bot commented Mar 21, 2023 •

edited