Vulnerability UI

Getting Started

Make sure you have installed the following before starting

1. node, npm
2. docker
3. python2

There is a comprehensive quick start guide in the Storybook Documentation to setting up an Insights environment complete with:

• This repository
• Insights Chroming
• Insights Proxy

Use https://github.com/RedHatInsights/insights-proxy/blob/master/scripts/patch-etc-hosts.sh to patch your /etc/hosts (run only once)

Running locally

1. npm install

2. npm run start:proxy

with insights-proxy (deprecated)

Have insights-proxy installed under PROXY_PATH and run the following

1. SPANDX_CONFIG="$(pwd)/vulnerability-ui/profiles/local-frontend.js" bash $PROXY_PATH scripts/run.sh

2. npm install

3. npm run start

   • starts webpack bundler and serves the files with webpack dev server against chrome beta

Testing

Jest is used as the testing framework

1. npm run test
   • will run tests
2. npm run lint - will run linters
3. npm run test:update
   • will update snapshots
4. npm run test:watch
   • will run watch mode

Internationalization

Adding translation

if you want to add new translation, you need to modify the Messages.js file.

Generate translation keys

Each time you add a new translation keys you need to run the following:

1. npm run translations

it will automatically generate the json files based on the keys in the Messages.js.

Using translation

There are two ways to use internationalization. Both ways take as an argument or prop the ID for the locale.

1. with intl.formatMessage(ID)
   • example
2. with <FormattedMessage ...props/>
   • example

Deploying

Any push to the following branches, it will deploy to vulnerability-ui-build

Push to branch	Updated branch(es)	Environment(s)
master	ci-beta, qa-beta	ci/qa beta
ci-stable	ci-stable	ci stable
qa-beta	qa-beta	qa/stage beta
qa-stable	qa-stable	qa/stage stable
prod-beta	prod-beta	production beta
prod-stable	prod-stable	production stable

Design System

This project imports Patternfly components:

• Patternfly React

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

Versioning

This project uses semantic versioning https://semver.org/. This process is automated by using Semantic Release