Koku UI

User interface is based on Patternfly

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

Requirements

• NodeJS v18.15+
• npm v9.5+

Setup /etc/hosts entries (do this once)

Edit the /etc/hosts file and add the following entries

127.0.0.1 prod.foo.redhat.com
127.0.0.1 stage.foo.redhat.com

Alternatively, run the patch-etc-hosts.sh script from the insights-proxy repo

sudo bash scripts/patch-etc-hosts.sh

Getting Started

1. Install requirements listed above.
2. Setup /etc/hosts entries listed above.
3. Clone the repository, and open a terminal in the base of this project.
4. Run the command npm install to install all the dependencies.

Building

npm build

Testing

npm test

Running Koku UI against a hosted Koku API, using webpack proxy

Note that this approach currently supports the Insights stage-beta, stage-stable, prod-beta, and prod-stable environments.

1. Start development server

npm start

Follow the prompts that follow.

• Do you want to use local api? no
• Which platform environment you want to use stage
• Which Chrome environment you want to use? beta

2. Open the following URL

https://stage.foo.redhat.com:1337/beta/openshift/cost-management

Running local instances of Koku UI & Koku API

Koku UI

1. Start development server (Answer yes to run against local APIs)

npm start

Follow the prompts that follow.

• Do you want to use local api? yes
• Which platform environment you want to use stage
• Which Chrome environment you want to use? beta

2. Open the following URL

 http://localhost:8002/beta/openshift/cost-management

Koku API

Refer to the project README for prerequisites

1. Setup & run Koku API (see project README for more details)

> git clone git@github.com:project-koku/koku.git
> cd [KOKU_GIT_REPO]
> pipenv install --dev
> pipenv shell "pre-commit install"
> make docker-up-min or make docker-up-min-trino
> make create-test-customer
> make load-test-customer-data (use with docker-up-min-trino)

2. Check to see if containers are running (optional)

> docker ps --format "table {{.Names}}\t{{.Image}}\t{{.Ports}}\t{{.Status}}"

3. Watch the Koku API logs in another terminal (optional)

> docker-compose logs -f koku-server koku-worker

4. Clean up (optional)

pipenv shell
make docker-down
make remove-db
docker system prune --all
exit

Running local instances of Settings Frontend & Koku API

Follow the steps to run a local Koku API instance

1. Clone the Settings Frontend repository and install dependencies

> git clone https://github.com/RedHatInsights/settings-frontend.git
> cd [SETTINGS_FRONTEND_GIT_REPO]
> npm install

2. Set the following variables in your environment

> export API_PORT=8000
> export LOCAL_API="/api/cost-management/v1/"
> export KEYCLOAK_PORT=4020

3. Start development server

> npm run start:standalone:beta

4. Open the following URL

http://localhost:1337/beta/settings/applications/cost-management

Releasing Koku UI

This RELEASE doc describes how to release the UI to each staging environment.

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