Koku UI

User interface for Koku based on Patternfly

To submit an issue please visit https://issues.redhat.com/projects/COST/

Requirements

• NodeJS v12+
• yarn 1.21+

Getting Started

1. Install requirements listed above.
2. Clone the repository, and open a terminal in the base of this project.
3. Run the command yarn to install all the dependencies.
4. Clone the insights-proxy repository.
5. Run insights-proxy setup steps.

Running Development Server against a hosted Koku instance behind Insights Proxy

Start Insights Proxy

From the insights-proxy project directory run the following command to interact with the deployed environment:

SPANDX_CONFIG=/path/to/koku-ui/config/spandx.config.js bash /path/to/insights-proxy/scripts/run.sh

Start Development Server

APP_ENV=proxy yarn start

As a convenience start:dev has been provided to work behind the proxy.

yarn start:dev

Point your browser to the Overview page

Building

yarn build

Testing

yarn test

Manifest

Produces a file used by product security for vulnerability and compliance tracking.

yarn update:manifest

Useful Links

Libs

• TypeScript
• React
• Redux - State Management
  • Redux-Thunk - Middleware for returning functions from actions (gives access to dispatch and getState to action)
  • typesafe-actions - Typesafe Redux
  • Selectors
• Axios - HTTP Client
• React Router
  • withRouter - Injects components with route props
  • Link
  • Route
• React I18Next - React Wrapper for i18next
• PatternFly React 4
  • Source - react-*/**
  • PRS
  • Issues

Tools

• React Devtools
  • Chrome
  • Firefox
• Redux Devtools
  • Chrome
  • Firefox
• VSCode
  • TSLint - Linting
    • In Settings add

    {
      ...
      "tslint.autoFixOnSave": true,
      ...
    }

  • Prettier - Autoformat
    • In settings add:

    {
      ...
      "[typescript]": {
        "editor.formatOnSave": true
      },
      "[typescriptreact]": {
          "editor.formatOnSave": true
      },
      ...
    }

  • Docker - Manage Docker images from VSCode