npm package: @redhat-cloud-services/frontend-components-inventory-vulnerabilities
Description: [![Build Status](https://travis-ci.com/RedHatInsights/vulnerability-ui.svg?branch=master)](https://app.travis-ci.com/github/RedHatInsights/vulnerability-ui) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release
Latest version: 1.87.29

[![Build Status](https://travis-ci.com/RedHatInsights/vulnerability-ui.svg?branch=master)](https://app.travis-ci.com/github/RedHatInsights/vulnerability-ui)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
[![GitHub release](https://img.shields.io/github/release/RedHatInsights/vulnerability-ui.svg)](https://github.com/RedHatInsights/vulnerability-ui/releases/latest)
[![codecov](https://codecov.io/gh/RedHatInsights/vulnerability-ui/branch/master/graph/badge.svg)](https://codecov.io/gh/RedHatInsights/vulnerability-ui)

# Vulnerability UI

## First time setup
### Quick start
1. Make sure you have [`Node.js`](https://nodejs.org/en/) and [`npm`](https://www.npmjs.com/) installed
2. Run [script to patch your `/etc/hosts`](https://github.com/RedHatInsights/insights-proxy/blob/master/scripts/patch-etc-hosts.sh)
3. Make sure you are using [Red Hat proxy](http://hdn.corp.redhat.com/proxy.pac)

### Comprehensive documentation
There is a [comprehensive quick start guide in the Storybook Documentation](https://github.com/RedHatInsights/insights-frontend-storybook/blob/master/src/docs/welcome/quickStart/DOC.md) to setting up an Insights environment.

## Running locally
1. Install dependencies with `npm install`
2. Run development server with `npm run start:proxy:beta`
3. Local version of the app will be available at https://stage.foo.redhat.com:1337/beta/insights/vulnerability/

## Testing
[Jest](https://jestjs.io/) is used as the testing framework
- ```npm run test``` - run all tests
- ```npm run test -- testName``` - run tests for all components matching `testName`
- ```npm run lint``` - run linter
- ```npm run test:update``` - run all tests and update snapshots
- ```npm run test:watch``` - run tests in watch mode

## Deploying

Any push to the following branches will trigger a build in [vulnerability-ui-build repository](https://github.com/RedHatInsights/vulnerability-ui-build) which will deploy to corresponding environment.

| Push to branch in this repo  | Updated branch in build repo  | Environment       | Available at
| :--------------------------- | :---------------------------- | :---------------- | :-----------
| master                       | stage-beta                    | stage beta        | https://console.stage.redhat.com/beta
| stage-stable                 | stage-stable                  | stage stable      | https://console.stage.redhat.com
| prod-beta                    | prod-beta                     | production beta   | https://console.redhat.com/beta 
| prod-stable                  | prod-stable                   | production stable | https://console.redhat.com

## Internationalization

### Translation keys
Translation keys are saved in [messages.js](https://github.com/RedHatInsights/vulnerability-ui/blob/master/src/Messages.js). 

### Generating translation keys
Each time you add a new translation keys you need to run `npm run translations`, which will automatically generate JSON files for every language into [`locales/`](https://github.com/RedHatInsights/vulnerability-ui/tree/master/locales) folder based on the entries in the [messages.js](https://github.com/RedHatInsights/vulnerability-ui/blob/master/src/Messages.js). 

### Using translated strings
There are two ways to use translated strings:
1. With `intl.formatMessage(messages.messageId)`
2. With `<FormattedMessage {...messages.messageId}/>`

## Design System
This project uses [Patternfly React](https://github.com/patternfly/patternfly-react).

## Insights Components
This app imports components from [Insights Front-end Components library](https://github.com/RedHatInsights/frontend-components). ESI tags are used to import [Insights Chrome](https://github.com/RedHatInsights/insights-chrome) which takes care of the header, sidebar, and footer.

## Versioning
This project uses [Semantic Versioning](https://semver.org/). Release process is automated by using [Semantic Release](https://github.com/semantic-release/semantic-release).