Advertiser Billing UI

Description

The app provides a UI to work with billing relevant data. The Advertiser Billing UI relies on the corresponding backend Advertiser Billing Service which lives in its own repository.

Technology stack

The following technology stack is used to run the application in production:

• JavaScript
• React
• Redux

Building a docker image requires docker version 17.05 or higher.

Setup

In order to setup and run the application following tools have to be installed first:

• nodejs: provides a node server, i.e. a virtual machine for running JavaScript
• npm: a package manager for javascript dependencies

After checking out the project for the first time, execute the setup target: make setup

make setup works only in debian based OS

Run the application locally

• Run Advertiser Billing Service in development profile. Instructions for that can be found in its README file.
• Execute make run

The UI app should be available at http://localhost:3000. Provide valid endpoints to view different pages.

Build a docker image

To compile all relevant files into one JavaScript file and create a docker image, first make sure environment variables are set correctly on the build machine. Refer to .env file configs.

Execute make docker-build.

This step also executes the tests in docker container, while building the image as a part of multi-stage build. This is done to reduce dependencies on environment, where the app is being built.

This is used by Jenkins to build and deploy the app live.

Run the application as docker container in DCE

1. Build the Advertiser billing UI app using the instructions above.

2. Start the DCE, as described in README of Darwin and in the Knowledge Base.

• Alternatively, run a minimal setup using the ACE tool, as described in the corresponding section of Advertiser Billing Service.

Open Advertiser billing UI in a browser

Login to Darwin: https://ui.d-lhr1-docker-XXX.dev.awin.com/login

Replace XXX with your devbox number

Consult the index.js file for URLs served by the application.

Example:

https://ui.d-lhr1-docker-XXX.dev.awin.com/provider/finance/advertisers/23/settings

Docker images

http://registry.zanox.com/repository/library/advertiserbillingui/

Run the UI tests

To run the UI tests on local or in Jenkins use:

make test

This target does not build the app.

• If the environment variable CI is set (with any value), the command will run the tests normally.
• Otherwise, the command will run the tests in interactive "watch" mode. In this case, saving code changes will immediately re-run the tests.

Locally, you might want to run the tests without checking for dependencies:

npm test

Running the tests of a suite (e.g. in the FailureReportTest.js) can be achieved by

npm test SomeTest

Updating to new releases of Create React App

This project was bootstrapped with Create React App.

You can find the most recent version of this guide here.

Create React App is divided into two packages:

• create-react-app is a global command-line utility that you use to create new projects.
• react-scripts is a development dependency in the generated projects (including this one).

You almost never need to update create-react-app itself: it delegates all the setup to react-scripts.

When you run create-react-app, it always creates the project with the latest version of react-scripts so you’ll get all the new features and improvements in newly created apps automatically.

To update an existing project to a new version of react-scripts, open the changelog, find the version you’re currently on (check package.json in this folder if you’re not sure), and apply the migration instructions for the newer versions.

In most cases bumping the react-scripts version in package.json and running npm install in this folder should be enough, but it’s good to consult the changelog for potential breaking changes.