NCATS-WebUI

An Angular web application for displaying CyHy Vulnerability Scanning data.

Getting Started

git clone git@github.com:cisagov/ncats-webui.git
cd ncats-webui
cp src/config/config.sample.json src/config/config.json
make dev-build

Configuration file

You can change the location of the API by modifying src/config/config.json.

Field	Type	Description
data_protocol	string	The protocol used for communicating with the API
data_host	string	The host of the API (IP/Hostname)
data_port	string	The port the API is running on
data_path	string	The path (if necessary) to access the API
cycle_pages	string	A string "true"/"false" to determine whether to auto-cycle the pages for the user
components	dict	A dictionary containing a component name and a boolean value to determine whether to show/hide that component. Example item: "hostmap": true

NOTE: If you are running a local development server, the data path should be blank:

   "data_path": "",

If you are running in Production, the data path should be the path to your API, for example:

   "data_path": "api",

Developing and testing with Docker

The fastest way to get started developing and testing will be to use Docker. The following will build a development server with live-reload enabled and expose it at http://localhost:4200. Any code changes made by you in the ncats-webui/src directory will cause the site to automatically update in your browser. Run the following command from the root of the repository.

Starting the development server

make dev-start

Viewing the development server logs

make dev-logs

Stopping the development server

When you are finished developing stop the development server.

make dev-stop

Cleaning up

If you are finished with the project, you can clean up all volumes and images with the following:

make dev-clean

Adding components, services, etc. with Angular CLI

If you want to add new web pages, services, etc., ng is the tool to do the job. It is the Angular CLI tool, which is what this project is built on.

Executing ng commands

$ make dev-shell
root@container# ng g component my-component
root@container# ng g service my-service

Ensure that the addition is added to the app.module.ts file with the rest of its type.

For more information on the usage of ng, visit the Angular CLI repo.

Adding Packages

Since the npm/bower package installation occurs in the building of the image, you will need to add your package using whatever method you like (the easiest is npm install --save, as shown below).

Install NPM or Bower packages

$ make dev-shell
root@container# npm install <package_name> --save
root@container# exit

Don't forget that this container is temporary. You will need to rebuild your image with the new packages included when you're satisfied with your changes. Note, you do not have to rebuild for code changes, only changes to package systems.

Rebuild the development server

make dev-rebuild

Developing and testing with Node (no Docker)

Prerequisites

• Node v10.24.1
• NPM v7.24.2

A note for NPM users

When installing packages with npm, the package will be made available "locally", or in your current working directory. From time to time you'll want to use it to install packages "globally", or system-wide. npm global installs are put in /usr/local, and binaries from those packages are sym-linked in /usr/local/bin. Some people don't mind sudoing npm installs, or chowning /usr/local to make this work. However, I prefer changing the npm prefix to somewhere I have access. An example of how to do this can be seen below:

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'

~/.profile

NPM_PREFIX=`npm config get prefix`
export PATH="$NPM_PREFIX/bin:$PATH"

More info can be found here.

Development

You can get a quick test server up and running by issuing the following commands

cd client
make dev
./node_modules/.bin/ng serve

This will serve up the Angular 2 application at http://localhost:4200. Every time you make changes to the application, the project should update itself and reload.

Building

cd client
./node_modules/.bin/ng build --prod

Both of these methods output the prod files to a dist folder within the client/ folder of this repository. Copy this to your web server's directory and you should be good to go. Ensure .htaccess looks good, and mod_rewrite is enabled when using Apache.

References

loading-circles - http://codepen.io/Siddharth11/pen/xbGrpG

Contributing

We welcome contributions! Please see CONTRIBUTING.md for details.

License

This project is in the worldwide public domain.

This project is in the public domain within the United States, and copyright and related rights in the work worldwide are waived through the CC0 1.0 Universal public domain dedication.

All contributions to this project will be released under the CC0 dedication. By submitting a pull request, you are agreeing to comply with this waiver of copyright interest.