Files
awx/awx/ui_next
softwarefactory-project-zuul[bot] d53d41b84a Merge pull request #9776 from AlexSCorey/9019-MultiChart
Observability Metrics

SUMMARY
This adds the chart for Observability Metrics (#9019).  To see the chart you need to navigate to /metrics.  Also, its best if you run a build that has multiple instances.  This will do that for you COMPOSE_TAG=devel CLUSTER_NODE_COUNT=2 make docker-compose.
When this feature loads the user has to select an instance (1, or all) and a metric to render data on the graph.  Once they select those items, the chart appears and we start to make requests to the api every 3 seconds to get the data. (Currently the api does not support web sockets for this feature) If the user changes the values for either of the drop down items the chart resets.  The chart also only show the last 50 data points.
There is a "tooltip" that is rendered at the bottom left hand side.  I decided to put it there, instead of on the chart itself because this chart could get quite crowded depending the number of data points rendered and the number of instances rendering lines.
The X axis is sort of meaningless.  The values below simply render the number of api requests. This isn't a value of time. Since the main goal of this feature is to show significant changes instead of tryin to pinpoint when the change occurs I felt that showing a time stamp on this axis would crowd the axis as well.
ISSUE TYPE

Feature Pull Request

COMPONENT NAME

UI

AWX VERSION
ADDITIONAL INFORMATION

Reviewed-by: Kersom <None>
Reviewed-by: Jake McDermott <yo@jakemcdermott.me>
Reviewed-by: Alex Corey <Alex.swansboro@gmail.com>
Reviewed-by: Mat Wilson <mawilson@redhat.com>
2021-04-15 21:59:28 +00:00
..
2020-12-14 17:05:18 -05:00
2021-04-08 09:14:40 -04:00
2021-04-08 09:14:40 -04:00

AWX-PF

Requirements

  • node 14.x LTS, npm 6.x LTS, make, git

Development

The API development server will need to be running. See CONTRIBUTING.md.

# install
npm --prefix=awx/ui_next install

# Start the ui development server. While running, the ui will be reachable
# at https://127.0.0.1:3001 and updated automatically when code changes.
npm --prefix=awx/ui_next start

Build for the Development Containers

If you just want to build a ui for the container-based awx development environment, use these make targets:

# The ui will be reachable at https://localhost:8043 or
# http://localhost:8013
make ui-devel 

# clean up 
make clean-ui

Using an External Server

If you normally run awx on an external host/server (in this example, awx.local), you'll need use the TARGET environment variable when starting the ui development server:

TARGET='https://awx.local:8043' npm --prefix awx/ui_next start

Testing

# run code formatting check
npm --prefix awx/ui_next run prettier-check

# run lint checks
npm --prefix awx/ui_next run lint

# run all unit tests
npm --prefix awx/ui_next run test

# run a single test (in this case the login page test):
npm --prefix awx/ui_next test -- src/screens/Login/Login.test.jsx

# start the test watcher and run tests on files that you've changed
npm --prefix awx/ui_next run test-watch

# start the tests and get the coverage report after the tests have completed
npm --prefix awx/ui_next run test -- --coverage

Note:

  • Once the test watcher is up and running you can hit a to run all the tests.
  • All commands are run on your host machine and not in the api development containers.

Adding Dependencies

# add an exact development or build dependency
npm --prefix awx/ui_next install --save-dev --save-exact dev-package@1.2.3

# add an exact production dependency
npm --prefix awx/ui_next install --save --save-exact prod-package@1.23

# add the updated package.json and package-lock.json files to scm
git add awx/ui_next_next/package.json awx/ui_next_next/package-lock.json

Removing Dependencies

# remove a development or build dependency
npm --prefix awx/ui_next uninstall --save-dev dev-package

# remove a production dependency
npm --prefix awx/ui_next uninstall --save prod-package

Building for Production

# built files are placed in awx/ui_next/build
npm --prefix awx/ui_next run build

CI Container

To run:

cd awx/awx/ui_next
docker build -t awx-ui-next .
docker run --name tools_ui_next_1 --network tools_default --link 'tools_awx_1:awx' -e TARGET="https://awx:8043" -p '3001:3001' --rm -v $(pwd)/src:/ui_next/src awx-ui-next

Note: This is for CI, test systems, zuul, etc. For local development, see usage