Add Dockerfile for serving containerised frontend

[alexcreasy]

Description

This PR allows the frontend to be served in a container using nginx and adds:

• Dockerfile for serving the frontend and proxying calls to the bff.
• An example docker-compose for running the stack.
• Webpack config for proxying and url rewriting for the frontend in dev mode.
• A frontend Makefile for building the docker image

How Has This Been Tested?

• Run the example docker-compose file: podman compose up -d (swap podman for docker if that's your bag)
• Verify the frontend loads in a browser at: localhost:8080
• Verify the reverse proxy to the backend works via curl: curl localhost:8080/api/v1/model-registry/ - this should return a valid response from the bff
• Run the frontend in dev mode using: npm run start:dev - run the bff directly using make run PORT=4000 MOCK_K8S_CLIENT=true in a separate terminal and verify the dashboard loads in a browser and the proxy functions by running: curl localhost:9000/api/v1/model-registry/.
• Run the frontend Makefile make CONTAINER_TOOL=podman (leave out the CONTAINER_TOOL param to use docker)

Merge criteria:

• The commits and have meaningful messages; the author will squash them after approval or will ask to merge with squash.
• Testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
• The developer has manually tested the changes and verified that the changes work

[Griffin-Sullivan]

I must be doing something wrong. Everything in the testing works for me except when I run docker compose up -d then go to localhost:8080 it's not working. I'm getting minified react errors so I can't see what the exact cause is. I'm going to keep digging.

Edit: Got it to work. I removed everything and ran npm install before docker compose again. Besides the two comments everything is good to me.

Edit 2: I've tested everything and it works for me. Note about Run the frontend in dev mode using: npm run start:dev - verify this works with proxied backend URLs. If you want to test yourself you need to run the backend separately in the bff dir with the command make run PORT=4000 MOCK_K8S_CLIENT=true.

[lucferbux]

couple of nits and suggestions

[alexcreasy]

I've addressed all the feedback given:

• the proxy no longer uses the /p/ prefix, so you can query using /api/v1/model-registry/ directly. I've updated the instructions in the PR.
• I've updated the build stage of the container build, it should no longe rely on you having the correct node_modules installed.

[Griffin-Sullivan]

Retested everything and it's working as expected

[lucferbux]

/lgtm

[google-oss-prow]

@lucferbux: changing LGTM is restricted to collaborators

In response to this:

/lgtm

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[google-oss-prow]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: ederign, Griffin-Sullivan, lucferbux

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• clients/ui/OWNERS [ederign]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[ederign]

/lgtm