Koku UI

User interface for Koku based on Patternfly

Requirements

• NodeJS v8+
• yarn 1.5+

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:

bash scripts/run.sh

To run the koku-ui against a local koku server run the following command:

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

Note: The local koku server must mirror the API path used in the config/spandx.config.js. You may also need to alter the port for the localKoku variable if you are not using the default port. From openshift you may need to use port-forwarding.

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

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