Added insights dev setup standalone (#1526)

* Update insights dev environment

Issue: AAH-1262

* README: clean up insights mode docs, there is no insights-proxy or spandx anymore

* drop profiles/ - unused now

goes with ansible/galaxy_ng#1224

* add the basic config, frontend-components-config-utilities

taken from #1526, except less changes

* docker/entrypoint.sh - show an error when using ANSIBLE_HUB_UI_PATH in insights mode

this would technically work as configured,
except `npm run start` now involves running docker to start more container

dockerd won't start in the existing alpine env, failing on missing cgroups v2
and there's no podman apk
switching to bullseye based node container might still work though

Co-authored-by: Martin Hradil <mhradil@redhat.com>

Author: brumik

CHANGES/1262.misc

@@ -0,0 +1 @@
+Update insights dev environment

README.md

@@ -10,67 +10,27 @@ This project can now be run as a container alongside the API. Just follow the in
 
 ## Develop without containers
 
-This app can be developed in standalone mode or insights mode. Insights mode compiles the app to be run on the Red Hat cloud services platform (insights) and requires access to the Red Hat VPN as well as the insights proxy. Standalone mode only requires a running instance of the galaxy API for the UI to connect to.
+This app can be developed in standalone mode or insights mode. Insights mode compiles the app to be run on the Red Hat cloud services platform (insights). Standalone mode only requires a running instance of the galaxy API for the UI to connect to.
 
 ### Develop in Standalone Mode
 
 1. Clone the [galaxy_ng](https://github.com/ansible/galaxy_ng) repo and follow the instructions for starting up the API.
-2. Install node. Node v13+ are known to work. Older versions may work as well.
+2. Install node. Node v14+ is known to work. Older versions may work as well.
 3. `npm install`
 4. `npm run start-standalone`
 
-The app will run on http://localhost:8002 and proxy requests for `api/automation-hub` to the api on `http://localhost:5001`.
+The app will run on http://localhost:8002/ui and proxy requests for `/api/automation-hub` to the api on `http://localhost:5001`.
 
 ### Develop in Insights Mode
 
-**NOTE:** This option is only available to Red Hat employees who have access to the Red Hat VPN. Community contributors should follow setup for [standalone mode](#develop-in-standalone-mode)
+**NOTE:** This option is only relevant to Red Hat employees. Community contributors should follow setup for [standalone mode](#develop-in-standalone-mode)
 
-To enable insights mode set `DEPLOYMENT_MODE: 'insights'` in [custom.dev.config.js](./custom.dev.config.js).
-
-This app is part of the Red Hat cloud platform. Because of that the app needs to be loaded within the context of console.redhat.com. This is done by accessing the app via the [insights-proxy project](https://github.com/RedHatInsights/insights-proxy).
-
-#### Set up Insights Proxy
-
-- Install docker
-- Clone this repo `git@github.com:RedHatInsights/insights-proxy.git` to your machine
-- Inside the `insights-proxy/` directory on your computer, run the following scripts
-  - `npm install`
-  - `bash scripts/update.sh` This updates the insights proxy container to the latest version.
-  - `sudo bash scripts/patch-etc-hosts.sh` This adds the following entries to your `/etc/hosts` file
-
-```
-127.0.0.1 prod.foo.redhat.com
-127.0.0.1 stage.foo.redhat.com
-127.0.0.1 qa.foo.redhat.com
-127.0.0.1 ci.foo.redhat.com
-```
-
-Once all this is done, you can launch `insights-proxy` with this command:
-
-```
-SPANDX_CONFIG=/path/to/ansible-hub-ui/profiles/local-frontend-and-api.js bash /path/to/insights-proxy/scripts/run.sh
-```
-
-This should launch `insights-proxy`, which will redirect the routes defined in `profiles/local-frontend-and-api.js` to the automation hub UI running locally on your machine.
-
-##### NOTE
-
-If you are on a Mac, you might have to make a small change to the `insights-proxy/scripts/run.sh` script. Update this line
-
-```
-REALPATH=`python2 -c 'import os,sys;print os.path.realpath(sys.argv[1])' $SPANDX_CONFIG`
-```
-
-to use `python` instead of `python2`.
-
-#### Run Automation Hub
-
-Once the insights proxy is running, open a new terminal, navigate to your local copy of `ansible-hub-ui` and execute
-
-1. `npm install`
-2. `npm run start`
+1. Clone the [galaxy_ng](https://github.com/ansible/galaxy_ng) repo and start the API with `COMPOSE_PROFILE=insights`.
+2. Install node. Node v14+ is known to work. Older versions may work as well.
+3. `npm install`
+4. `npm run start`
 
-To access the app, visit: https://ci.foo.redhat.com:1337/insights/automation-hub
+The app will run on http://localhost:8002/beta/ansible/automation-hub and proxy requests for `/api/automation-hub` to the api on `http://localhost:5001`.
 
 ## Deploying
 

config/insights.dev.webpack.config.js

@@ -1,5 +1,8 @@
 const webpackBase = require('./webpack.base.config');
 
+const proxyHost = process.env.API_PROXY_HOST || 'localhost';
+const proxyPort = process.env.API_PROXY_PORT || '5001';
+
 module.exports = webpackBase({
   // The host where the API lives. EX: https://localhost:5001
   API_HOST: '',
@@ -8,6 +11,9 @@ module.exports = webpackBase({
   API_BASE_PATH: '/api/automation-hub/',
   PULP_API_BASE_PATH: '/api/automation-hub/pulp/api/v3/',
 
+  // Value for standalone.api.target
+  API_PROXY_TARGET: `http://${proxyHost}:${proxyPort}`,
+
   // Path on the host where the UI is found. EX: /apps/automation-hub
   UI_BASE_PATH: '',
 
@@ -29,7 +35,7 @@ module.exports = webpackBase({
   USE_FAVICON: false,
 
   // Serve the UI over http or https. Options: true, false
-  UI_USE_HTTPS: true,
+  UI_USE_HTTPS: false,
 
   // Enables webpack debug mode. Options: true, false
   UI_DEBUG: true,

config/webpack.base.config.js

@@ -1,5 +1,9 @@
 const { resolve } = require('path'); // node:path
 const config = require('@redhat-cloud-services/frontend-components-config');
+const {
+  rbac,
+  defaultServices,
+} = require('@redhat-cloud-services/frontend-components-config-utilities/standalone');
 const webpack = require('webpack');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@@ -37,6 +41,7 @@ const defaultConfigs = [
   { name: 'WEBPACK_PROXY', default: undefined, scope: 'webpack' },
   { name: 'WEBPACK_PUBLIC_PATH', default: undefined, scope: 'webpack' },
   { name: 'USE_FAVICON', default: true, scope: 'webpack' },
+  { name: 'API_PROXY_TARGET', default: undefined, scope: 'webpack' },
 ];
 
 module.exports = (inputConfigs) => {
@@ -86,6 +91,21 @@ module.exports = (inputConfigs) => {
 
     // frontend-components-config 4.5.0+: don't remove patternfly from non-insights builds
     bundlePfModules: isStandalone,
+
+    // insights dev
+    ...(!isStandalone &&
+      !isBuild && {
+        appUrl: '/beta/ansible/automation-hub/',
+        deployment: 'beta/apps',
+        standalone: {
+          api: {
+            context: [customConfigs.API_BASE_PATH],
+            target: customConfigs.API_PROXY_TARGET,
+          },
+          rbac,
+          ...defaultServices,
+        },
+      }),
   });
 
   // Override sections of the webpack config to work with TypeScript
@@ -174,6 +194,10 @@ module.exports = (inputConfigs) => {
               isBuild ? '../src/app-entry.js' : '../src/dev-entry.js',
             ),
           },
+          ...(!isBuild && {
+            // fixes "Shared module is not available for eager consumption"
+            exclude: ['@patternfly/react-core'],
+          }),
         },
       ),
     );

docker/entrypoint.sh

@@ -1,7 +1,13 @@
 #!/bin/sh
 if [[ $DEPLOYMENT_MODE == 'insights' ]]
 then
-  npm run start
+  echo 1>&2
+  echo 'ANSIBLE_HUB_UI_PATH not supported in insights mode' 1>&2
+  echo 1>&2
+  echo 'please run' 1>&2
+  echo '  npm run start' 1>&2
+  echo 'in the UI dir manually' 1>&2
+  echo 1>&2
 else
   npm run start-standalone
 fi

package.json

@@ -45,6 +45,7 @@
         "@lingui/macro": "^3.13.3",
         "@ls-lint/ls-lint": "^1.11.0",
         "@redhat-cloud-services/frontend-components-config": "^4.6.6",
+        "@redhat-cloud-services/frontend-components-config-utilities": "^1.5.17",
         "@typescript-eslint/eslint-plugin": "^5.21.0",
         "@typescript-eslint/parser": "^5.20.0",
         "babel-core": "^7.0.0-bridge.0",