particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Image Builder service for console.redhat.com
726 commits 9 branches 22 tags 26 MiB
Find a file
lucasgarfield de4e9bea07 Wizard: Improve file system configuration error messaging 
This commit improves the file system configuration step's error handling
by performing validation only when the next button is clicked. This
allows an invalid state to temporarily exist while the user is modifying
the mountpoints without bothersome error messages needlessly appearing.

Broadly speaking there were two options for the implementation: (1)
delay the validation, performing validation only upon clicking the next
button -or- (2) perform validation immediately as normal but hide error
messages until the next button is clicked. Option (1) proved to be
untenable - Data Driven Forms does provide `pauseValidation()` and
`resumeValidation()` functions from React Final Form which theoretically
would make this option possible... However, we need to call
`resumeValidation()` in the next button's click handler and then
immediately make a decision based on the validation results either to
remain on the step and display the errors or move to the next step.
When we tried implmenting this we found that `resumeValidation()` does
not immediately peform validation - validation only resumes after
exiting the handler. Therefore, this approach was not considered and
option (2) was used.

In order to gain control over the behavior of the next button, custom
buttons are implemented for this step. Sharing state between the custom
buttons and the form was a challenge. With pure React it would have been
as simple as moving the relevant state to the parent component, but that
was not possible due to Data Driven Forms. Instead, state is shared
using the form state. A new property,
`'file-system-config-show-errors'`, in the form state is used to
determine whether or not error messages should be displayed.

In order to cause a re-render upon a change in
`'file-system-config-show-errors'`, the file system configuration
component is wrapped in a `<FormSpy>` component.
2022-09-23 18:11:35 +02:00
.github Add Schutzbot and Sonarqube 2022-09-02 16:09:12 +02:00
.travis CI: Fix location of Jenkinsfile for sed 2022-06-03 12:38:36 +02:00
config ESLint: Use --fix with new rules to order import declarations 2022-09-14 13:24:38 +02:00
devel devel/gen-dashboard: use python3 explicitly in the shebang 2022-08-04 12:18:07 +02:00
distribution Fix docker stack (#713) 2022-04-26 14:00:53 +01:00
schutzbot Add Schutzbot and Sonarqube 2022-09-02 16:09:12 +02:00
src Wizard: Improve file system configuration error messaging 2022-09-23 18:11:35 +02:00
.eslintrc.yml ESLint: Set rules for import order 2022-09-14 13:24:38 +02:00
.gitignore Stop ignoring lock-file. 2021-10-12 15:03:04 +02:00
.gitlab-ci.yml Add Schutzbot and Sonarqube 2022-09-02 16:09:12 +02:00
.stylelintrc.json package-json: remove unnused stylint-scss and bump dependencies 2022-03-24 15:48:34 +01:00
.travis.yml .travis: Enable stage-stable and prod-stable branches 2022-04-21 14:42:55 +02:00
babel.config.js babel: update the babel config 2022-04-11 13:18:30 +02:00
codecov.yml codecov.yml: reset comment to default 2021-10-28 15:02:18 +01:00
LICENSE osbuild-installer-frontend 2020-03-27 10:14:04 +01:00
package-lock.json build(deps): bump @patternfly/patternfly from 4.185.1 to 4.210.2 2022-09-14 13:37:06 +02:00
package.json build(deps): bump @patternfly/patternfly from 4.185.1 to 4.210.2 2022-09-14 13:37:06 +02:00
README.md README: update start scripts (#711) 2022-04-22 15:38:48 +01:00

README.md

image-builder-frontend

Frontend Development

To develop the frontend you can use a proxy to run image-builder-frontend locally against the chrome and backend at console.redhat.com.

Working against the production environment is preferred, as any work can be released without worrying if a feature from stage has been released yet.

Nodejs and npm version

Make sure you have npm@7 and node 15+ installed. If you need multiple versions of nodejs check out nvm.

Webpack proxy

  1. run npm ci

  2. run npm run prod-beta. This command uses a prod-beta env by default. Configure your environment by the env attribute in dev.webpack.config.js.

  3. Secondly redirect a few prod.foo.redhat.com to localhost, if this has not been done already.

echo "127.0.0.1 prod.foo.redhat.com" >> /etc/hosts
  1. open browser at https://prod.foo.redhat.com:1337/beta/insights/image-builder

Webpack proxy (staging) -- Runs with image-builder's stage deployment

  1. run npm ci

  2. run npm run stage-beta. This command uses a stage-beta env by default. Configure your environment by the env attribute in dev.webpack.config.js.

  3. Secondly redirect a few stage.foo.redhat.com to localhost, if this has not been done already.

echo "127.0.0.1 stage.foo.redhat.com" >> /etc/hosts
  1. open browser at https://stage.foo.redhat.com:1337/beta/insights/image-builder

Insights proxy (deprecated)

  1. Clone the insights proxy: https://github.com/RedHatInsights/insights-proxy

  2. Setting up the proxy

    Choose a runner (podman or docker), and point the SPANDX_CONFIG variable to profile/local-frontend.js included in image-builder-frontend.

        sudo insights-proxy/scripts/patch-etc-hosts.sh
    export RUNNER="podman"
    export SPANDX_CONFIG=$PATH_TO/image-builder-frontend/profiles/local-frontend.js
    sudo -E insights-proxy/scripts/run.sh

  3. Starting up image-builder-frontend

    In the image-builder-frontend checkout directory

        npm install
    npm start

The UI should be running on https://prod.foo.redhat.com:1337/beta/insights/image-builder/landing. Note that this requires you to have access to either production or stage (plus VPN and proxy config) of insights.

Backend Development

To develop both the frontend and the backend you can again use the proxy to run both the frontend and backend locally against the chrome at cloud.redhat.com. For instructions see devel/README.md.

Style Guidelines

This project uses eslint's recommended styling guidelines. These rules can be found here: https://eslint.org/docs/rules/

Test Guidelines

Testing is done using React Testing Library. All UI contributions must also include a new test or update an existing test in order to maintain code coverage.

Tests can be run with

    npm run test

These tests will also be run in our Travis CI when a PR is opened.