This is the frontend application for Insights Inventory. It is based on the insights-frontend-starter-app.

1. Make sure you have Node.js (current LTS) and npm installed.
2. Run script to patch your /etc/hosts.
3. Make sure you are using Red Hat proxy.

1. Clone the repository.
2. Install dependencies with npm install.
3. Run development server with npm run start:proxy:beta. See dev.webpack.config.js and package.json (npm scripts) for more options and parameters available.
4. Local version of the app will be available at https://stage.foo.redhat.com:1337/preview/insights/inventory/. If you run with slightly different setup (for example, using production environment), you should still see the generated URL in your terminal, the webpack script output.

We use Jest with React Testing Library to write unit tests. For larger pieces of code or components, we utilize Cypress. For testing commands shortcuts (like npm run test, npm run test:ct, etc.), take a look at the package.json file which lists available scripts.

Before opening a pull request, you can run npm run verify:local to make sure your changes pass automated tests (Jest and Cypress) and linter (both JS and CSS linters). We also execute husky hooks with every commit to make sure the changes pass basic lint checks.

In order to keep our commits style consistent and the commits history easy to read, we utilize semantic-release which follows Angular Commit Message Conventions. Also, there is a commitlint check run on master, master-stable, prod-beta and prod-stable branches which ensures that all the commits meet the expected format (<type>(<scope>): <short summary>). Following this standard and specifying at least the type and summary for each commit helps to automatically generate a changelog of changes.

Applications on console.redhat.com are webpack federated modules, and you are able to deploy some of them locally. This helps to see if new changes work well in terms of integration.

If you want to see local changes to any of the Inventory components, and see how it behaves with other applications (like, for example, Inventory table is imported in Advisor), you will have to run both Inventory and desired application.

We'll take for example insights-advisor-frontend application as app that uses system detail.

Open new terminal and navigate to desired application (for instance insights-advisor-frontend) and run it (make sure to run it on a different port):

npm run start:proxy -- --port=8003

Run the Inventory application with proxy enabled and list of additional applications:

LOCAL_API=advisor:8003~https npm run start:proxy

Or, if you want to run Advisor and, for instance, Vulnerability, then just add a new entry to LOCAL_API:

LOCAL_API=advisor:8003~https,vulnerability:8004

This is one of the advanced methods to test frontend locally without waiting for API to have desired endpoints available.

Inventory frontend has support for https://github.com/stoplightio/prism CLI. The CLI reads the OpenAPI schema, spins up a localhost server and serves dynamically generated responses for Inventory API endpoints (/hosts, /groups, etc.).

1. Verify package.json config section for the correct URL to OpenAPI schema (contains remote URL by default).
2. Verify dev.webpack.config.js customProxy settings. There you can specify which endpoints to proxy and modify request/response headers.
3. Run npm run mock-server to start the mock server. The fist output must list the endpoints that are generated by the localhost server.
4. In another terminal, run npm run start:mock or npm run start:mock:beta to start the webpack server either in stage-stable or stabe-beta environment. The scripts set the MOCK variable to true and the customProxy is enabled.

We are serving inventory through federated modules, this means both inventory table and inventory detail is served to you in runtime. No need to install and rebuild when something changes in inventory.

These applications import InventoryTable component through federated modules:

• vulnerability-ui
• insights-remediations-frontend
• sed-frontend
• tasks-frontend
• compliance-frontend
• patchman-ui
• malware-detection-frontend
• drift-frontend
• ros-frontend
• insights-advisor-frontend
• edge-frontend

• Components
  • inventory
    • props table
    • props detail
    • custom fetch function
    • hide filters
    • general info tab
  • inventory_header