Frontend for Ansible Automation Hub. The backend for this project can be found here
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.
- Clone the galaxy_ng repo and follow the instructions for starting up the API.
- Install node. Node v13+ are known to work. Older versions may work as well.
npm install
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
.
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
To enable insights mode set DEPLOYMENT_MODE: 'insights'
in 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 cloud.redhat.com. This is done by accessing the app via the insights-proxy project.
- Install docker
- Clone this repo
[email protected]:RedHatInsights/insights-proxy.git
to your machine - Inside the
insights-proxy/
directory on your computer, run the following scriptsnpm 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.
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
.
Once the insights proxy is running, open a new terminal, navigate to your local copy of ansible-hub-ui
and execute
npm install
npm run start
To access the app, visit: https://ci.foo.redhat.com:1337/insights/automation-hub
npm run verify
will run linters and tests- Travis is used to test the build for this code.
- You are always notified on failed builds
- You are only notified on successful builds if the build before it failed
- By default, both
push
events as well aspull_request
events send notifications - Travis is defaulted to notify #insights-bots
- The Platform team is using Travis to deploy the application
- The Platform team will help you set up the Travis instance if this is the route you are wanting to take
- any push to the
{REPO}
master
branch will deploy to a{REPO}-build
ci-beta
branch - any push to the
{REPO}
master-stable
branch will deploy to a{REPO}-build
ci-stable
branch - any push to the
{REPO}
qa-beta
branch will deploy to a{REPO}-build
qa-beta
branch - any push to the
{REPO}
qa-stable
branch will deploy to a{REPO}-build
qa-stable
branch - any push to the
{REPO}
prod-beta
branch will deploy to a{REPO}-build
prod-beta
branch - any push to the
{REPO}
prod-stable
branch will deploy to a{REPO}-build
prod-stable
branch - Pull requests (based on master) will not be pushed to
{REPO}-build
master
branch- If the PR is accepted and merged, master will be rebuilt and will deploy to
{REPO}-build
ci-beta
branch
- If the PR is accepted and merged, master will be rebuilt and will deploy to
- This project imports Patternfly components:
Insights Platform will deliver components and static assets through npm. ESI tags are used to import the chroming which takes care of the header, sidebar, and footer.
-
High-Order Component
- a higher-order component is a function that takes a component and returns a new component
-
Smart/Presentational Components
- Smart components have access to the redux state
- Presentational components do not have access to the redux state
- Smart Components === insights-frontend/app/js/states
- Presentational Components === insights-frontend/app/js/components
-
State and lifecycle within class components
- article contains:
- Adding Lifecycle Methods to a Class
- Adding Local State to a Class
- State Updates May Be Asynchronous
- State Updates are Merged
- article contains:
When setting up the routes, the page content is wrapped with a .page__{pageName}
class, applied to the #root
ID that is determined by the rootClass
in the Routes.js
which lets you easily reference the page in the styling.
- BrowserRouter
- A
<Router>
that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL
- A
- Route
- Switch
- Renders the first child
<Route>
or<Redirect>
that matches the location.
- Renders the first child
- Redirect
- navigate to a new location
- withRouter
- passes updated match, location, and history props to the wrapped component whenever it renders