Frontend for Ansible Automation Hub. The backend for this project can be found here

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 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.

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

1. npm install
2. 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 as pull_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} ci-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

• This project imports Patternfly components:
  • Patternfly React

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.

This file exports an object with the configuration for webpack and webpack dev server.

{
    mode: https://webpack.js.org/concepts/mode/,
    devtool: https://webpack.js.org/configuration/devtool/,

    // different bundle options.
    // allows you to completely separate vendor code from app code and much more.
    // https://webpack.js.org/plugins/split-chunks-plugin/
    optimization: {
        chunks: https://webpack.js.org/plugins/split-chunks-plugin/#optimization-splitchunks-chunks-all,
        runtimeChunk: https://webpack.js.org/plugins/split-chunks-plugin/#optimization-runtimechunk,

        // https://webpack.js.org/plugins/split-chunks-plugin/#configuring-cache-groups
        cacheGroups: {

            // bundles all vendor code needed to run the entry file
            common_initial: {
                test: // file regex: /[\\/]node_modules[\\/]/,
                name: // filename: 'common.initial',
                chunks: // chunk type initial, async, all
            }
        }
    },

    // each property of entry maps to the name of an entry file
    // https://webpack.js.org/concepts/entry-points/
    entry: {

        // example bunde names
        bundle1: 'src/entry1.js',
        bundle2: 'src/entry2.js'
    },

    // bundle output options.
    output: {
            filename: https://webpack.js.org/configuration/output/#output-filename,
            path: https://webpack.js.org/configuration/output/#output-path,
            publicPath: https://webpack.js.org/configuration/output/#output-publicpath,
            chunkFilename: https://webpack.js.org/configuration/output/#output-chunkfilename
    },
     module: {
         rules: https://webpack.js.org/configuration/module/#module-rules
     },

     // An array of webpack plugins look at webpack.plugins.js
     // https://webpack.js.org/plugins/
     plugins: [],

     // webpack dev serve options
     // https://github.com/webpack/webpack-dev-server
     devServer: {}
}

• High-Order Component

  • a higher-order component is a function that takes a component and returns a new component
    • Ex) asyncComponent.js

• 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

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
• Route
• Switch
  • Renders the first child <Route> or <Redirect> that matches the location.
• Redirect
  • navigate to a new location
• withRouter
  • passes updated match, location, and history props to the wrapped component whenever it renders

Have insights-proxy installed under PROXY_PATH

SPANDX_CONFIG="./config/spandx.config.js" bash $PROXY_PATH/scripts/run.sh

When you want to test your code with unit tests please use jest which is preconfigured in a way to colect codecoverage as well. If you want to see your coverage on server the travis config has been set in a way that it will send data to codecov.io the only thing you have to do is visit their website (register), enable your repository and add CODECOV_TOKEN to your travis web config (do not add it to .travis file, but trough travis-ci.org)