Merge pull request #7469 from jakemcdermott/fix-7454

Use a proxy config that works

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

4 files changed, 11 insertions, 39 deletions

diff --git a/awx/ui_next/Dockerfile b/awx/ui_next/Dockerfile
index b78616cdb9..713fb207d8 100644
--- a/awx/ui_next/Dockerfile
+++ b/awx/ui_next/Dockerfile
@@ -1,10 +1,8 @@
 FROM node:10
 ARG NPMRC_FILE=.npmrc
 ENV NPMRC_FILE=${NPMRC_FILE}
-ARG TARGET_HOST='awx'
-ENV TARGET_HOST=${TARGET_HOST}
-ARG TARGET_PORT=8043
-ENV TARGET_PORT=${TARGET_PORT}
+ARG TARGET='https://awx:8043'
+ENV TARGET=${TARGET}
 ENV CI=true
 WORKDIR /ui_next
 ADD public public
diff --git a/awx/ui_next/README.md b/awx/ui_next/README.md
index 3d554915ec..2609f67655 100644
--- a/awx/ui_next/README.md
+++ b/awx/ui_next/README.md
@@ -14,14 +14,11 @@ npm --prefix=awx/ui_next start
 
 ### Using an External Server
 If you normally run awx on an external host/server (in this example, `awx.local`),
-you'll need to update your django settings and use the `TARGET_HOST` and `TARGET_PORT` environment variables:
+you'll need use the `TARGET` environment variable when starting the ui development
+server:
 
 ```shell
-echo "CSRF_TRUSTED_ORIGINS = ['awx.local:8043']" >> /awx/settings/development.py
-TARGET_HOST='awx.local:8043' TARGET_PORT=8043 npm --prefix awx/ui_next start
-```
-**Note:** When using an external server, you must also manually update the `proxy` field in `package.json`
-to point to the new websocket url.
+TARGET='https://awx.local:8043' npm --prefix awx/ui_next start
 
 ## Testing
 ```shell
@@ -79,7 +76,7 @@ To run:
 ```shell
 cd awx/awx/ui_next
 docker build -t awx-ui-next .
-docker run --name tools_ui_next_1 --network tools_default --link 'tools_awx_1:awx' -e TARGET_HOST=awx -p '3001:3001' --rm -v $(pwd)/src:/ui_next/src awx-ui-next
+docker run --name tools_ui_next_1 --network tools_default --link 'tools_awx_1:awx' -e TARGET="https://awx:8043" -p '3001:3001' --rm -v $(pwd)/src:/ui_next/src awx-ui-next
 ```
 
-**Note:** This is for CI, test systems, zuul, etc. For local development, see [usage](https://github.com/ansible/awx/blob/devel/awx/ui_next/README.md#usage)
+**Note:** This is for CI, test systems, zuul, etc. For local development, see [usage](https://github.com/ansible/awx/blob/devel/awx/ui_next/README.md#Development)
diff --git a/awx/ui_next/package.json b/awx/ui_next/package.json
index 0dfc6ef79e..e5ca6eb7f2 100644
--- a/awx/ui_next/package.json
+++ b/awx/ui_next/package.json
@@ -86,6 +86,5 @@
       "<rootDir>/src/locales",
       "index.js"
     ]
-  },
-  "proxy": "https://localhost:8043/websocket"
+  }
 }
diff --git a/awx/ui_next/src/setupProxy.js b/awx/ui_next/src/setupProxy.js
index cce025003f..916f548afb 100644
--- a/awx/ui_next/src/setupProxy.js
+++ b/awx/ui_next/src/setupProxy.js
@@ -1,35 +1,13 @@
 const { createProxyMiddleware } = require('http-proxy-middleware');
 
-const TARGET_PORT = process.env.TARGET_PORT || 8043;
-const TARGET_HOST = process.env.TARGET_HOST || 'localhost';
-const TARGET = `https://${TARGET_HOST}:${TARGET_PORT}`;
-
-// Note: The websocket proxy is configured
-// manually using the 'proxy' field in package.json
+const TARGET = process.env.TARGET || 'https://localhost:8043';
 
 module.exports = app => {
   app.use(
-    '/api/login/',
-    createProxyMiddleware({
-      target: TARGET,
-      secure: false,
-      ws: false,
-      headers: {
-        Host: `localhost:${TARGET_PORT}`,
-        Origin: TARGET,
-        Referer: `${TARGET}/`,
-      },
-    })
-  );
-  app.use(
-    '/api',
-    createProxyMiddleware({
+    createProxyMiddleware(['/api', '/websocket'], {
       target: TARGET,
       secure: false,
-      ws: false,
-      bypass: req =>
-        req.originalUrl.includes('hot-update.json') ||
-        req.originalUrl.includes('login'),
+      ws: true,
     })
   );
 };