Viewer Development

1. Go to https://scm.hue.workslan/company/wap-audit-viewer and clone the repository to local.

This section seeks to set down a series of development conventions and good practices. Also it seeks to resolve the conflicts between the development conventions of the tools used, that in occasions might overlap or contradict each other.

This project uses the following tools

• Angular: An application web development framework library that uses Typescript for development.
  • Typescript: A programming language that extends javascript that adds typing, enums, interfaces, generic types & other features. Sourcecode written in typescript compiles to JS to be executed in client (which is the case of this project) & server side.
• Redux: An application state management architecture/framework based on functional programming paradigm that eases sourcecode maintainability and reduces feature development complexity by isolating components. Also the name of a prominent library framework that implements Redux, which we are not using, we are using NgRx’s store library instead. RxJs along with some function implementation.
• ng-hue-starter project: A set of reusable components, libs, style sheets and utilities developed for internal use on the company distributed as a boilerplate project. It proposes a lot of configurations.

Project contains following folders and files:

• app
• • actions —List of angular actions in ts file
• • app-audit-log-viewer
• • • components — List of components each having one ts file to convert to js code, one html for view and one unit testing ts file
• • pipes
• • • entries
• • • highlight-suggest
• • • minify-user-id
• • • safe-get-attribute
• • reducers
• • selectors
• • services
• • • app-configuration
• • • auth
• • • downloader
• • • query
• • • reference
• • • tooltip
• • utils
• assets
• • font
• • mock
• environments
• resource
• • data — hardcoded data for timezone
• • texts — text resources are read from here
• package.json — declarion of versions of all external dependent modules

• yarn test — run unit tests
• yarn fix — Lint the code
• yarn build — build dist folder
• ng — serve start server

The Redux architecture framework is based in the concept of a group of system components that don’t interact with each other directly but they send messages to a core component that controls the application state and let know automatically about changes of this state only to the components that are affected by it.

This document pretends to delve into the design of the UI components, the data structures that describe the application state and the actions that change it.

The app consist of:

• Search bar
• Log list
• Log displaying panel
• Saved searches facet
• Advanced search dialog
• Date filter dialog
• Saved search edit facet dialog
• Toast (not shown)

The following data structures are proposed to represent a certain state of the UI and its behavior.

A data structure that contains the description of a query by providing the desired Log attributes

• There might exist many filters in the application
• There’s only one active filter in the application, it is the one that represents the current displayed results and it might differ from what the UI search bar and advanced search dialog display.
• There is a draft filter, it is the one that represents the current values in the UI and it holds the filtering parameters of a future query
• There is a saved filters collection that contains the filters that are marked as favorites. They are locally stored and represent the contents of the saved searches facet
• Filters support serialization operations (for bookmarking, saving, loading and friendly displaying to user)
• They contain an ID field that will be their reference value for related operations.

• There might exist many logs in the application
• The active log is the one that is currently being displayed in the log panel which could also empty in which case the active log is undefined
• They contain an ID field that will be their reference for related operations.

For running the project locally install the dependencies (node installation required) and run the angular server like below:

/.../wap-audit-viewer $ npm i
/.../wap-audit-viewer $ ng serve

and check the project running at local port 4200.

By default you can login through eva environment by adding /login/{tenant-name}/{landscape-name} to the URL, e.g. http://localhost:4200/login/collabstga/evaluation

If you want to use another environment, please edit src/assets/app-config.json so that the environment points to the one that you want. For example, following snippet shows that the authentication will go through dev environment:

{
   "name": "local",
   "HOST": "http://localhost:4200",
   "QUERY_SERVER_URL": "https://api.dev.audit-dev.worksap.com",
   "REF_SERVER_URL": "https://api.dev.audit-dev.worksap.com/ref",
   "AUTH_SERVER_URL": "https://api.dev.audit-dev.worksap.com/auth",
   "REGION": "ap-northeast-1",
   "COGNITO_DOMAIN": "https://cognito.dev.audit-dev.worksap.com",
   "DEVELOPER_MODE": "true"
}

When the local development is strictly UI (no data required from any of the API services), sometimes it’s practical to skip authentication. To skip authentication:

1. Make the session be valid unconditionally. Update getSessionStatus() method in auth.service.ts to always return SessionStatus.VALID, like:

   getSessionStatus(): SessionStatus {
       return SessionStatus.VALID;
   }
   

2. Comment out the token expiration logic. Update ngOnInit method in app-audit-log-viewer.component.ts. Basically let the method only dispatch the search, like:

   ngOnInit(): void {
       this.store.dispatch(search());
   }
   

The multilingual text resource is based on a master CSV file. To generate the constant file used by the application, from the repository root run following Python script:

/.../wap-audit-viewer $ python3 build\string_producer.py

For automatically stiling code run the command below before committing:

npm run fix

This requires chrome or chromium installed in your system. If your browser installation is not being located setup the CHROME_BIN variable

Once set you can run the below command:

npm run test

This repository implement CI/CD for deploying the latest build to a evaluation development environment when merging to develop branch (check the deployment script to see which environment is being using currently).

First you need to build the project manually or by running from the project root:

python3 build/build.py 

For deploying manually from your local machine use the following command from the repository root directory:

python3 build/deploy.py

You need to add some environment variables for AWS, SonarQube and some optional operation parameters