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
1221 commits 9 branches 22 tags 26 MiB
Find a file
regexowl 9f5a0af826 Wizard: Update the Repositories step 
This updates the Repositories and Review step as per [mocks](https://www.sketch.com/s/d7aa6d29-fca0-4283-a846-09cc5fd10612/a/MyEbDz7).

Repositories with the unavailable or invalid status have a popover that allows for further inspection. The time of the last introspection and the counter of failed attempts was added to the popover, together with the "Go to Repositories" button.

On Recreate the payload repositories are checked against "freshly" fetched list of repositories. In case any of the previously checked repositories is no longer available in content sources an Alert is rendered on both Repositories and Review steps. The unavailable repository is checked, but the checkbox is disabled and the information is dashed out. Since the information about the repository is stored in the Repository type, the only information available to be rendered is the baseurl.

Create image button is also disabled when recreating an image with unavailable repositories.
2023-09-11 10:30:04 +02:00
.github Actions: add workflow for marking and closing stale issues and PRs 2023-09-07 12:10:15 +02:00
.travis Update Jenkinsfile 2023-04-05 10:58:11 +02:00
api Api: generate RTK Query for Edge 2023-09-04 15:14:48 +02:00
config feat(HMS-1909): enable a custom host in LOCAL_API env var 2023-08-16 13:27:21 +02:00
deploy config: remove module name in webpack config (#959) 2023-02-09 12:17:27 +01:00
devel devel: expose correct composer ports and use tern migrations 2022-11-18 14:00:15 +01:00
distribution Fix docker stack (#713) 2022-04-26 14:00:53 +01:00
schutzbot ci: add tags to AWS instances 2022-11-10 18:46:09 +01:00
src Wizard: Update the Repositories step 2023-09-11 10:30:04 +02:00
.eslintignore api: ignore the generated code from eslintignore 2023-09-06 10:30:11 +02:00
.eslintrc-typescript.yml eslint: configure eslint for react app 2023-08-17 17:18:55 +02:00
.eslintrc.yml eslintrc: identation 2023-08-17 17:18:55 +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
api.sh Api: generate RTK Query for Edge 2023-09-04 15:14:48 +02:00
babel.config.js Typescript: Add initial Typescript setup 2023-06-20 07:25:02 +02:00
build_deploy.sh Frontend container migration 2022-10-18 17:12:09 +02:00
codecov.yml codecov.yml: reset comment to default 2021-10-28 15:02:18 +01:00
jest.setup.js Allow launch wizard for Azure images 2023-03-29 12:11:14 +02:00
LICENSE osbuild-installer-frontend 2020-03-27 10:14:04 +01:00
package-lock.json build(deps-dev): bump stylelint from 15.10.2 to 15.10.3 2023-09-06 08:42:36 +02:00
package.json build(deps-dev): bump stylelint from 15.10.2 to 15.10.3 2023-09-06 08:42:36 +02:00
pr_check.sh pr_check: update to enable testing with MR image 2023-08-16 14:49:50 +02:00
README.md API: Update readme and scripts 2023-07-28 15:05:08 +02:00
tsconfig.json API: Add programatically generated Provisioning API slice definitions 2023-07-28 15:05:08 +02:00

README.md

image-builder-frontend

Table of Contents

  1. How to build and run image-builder-frontend
    1. Frontend Development
    2. Backend Development
  2. File structure
  3. Style Guidelines
  4. Test Guidelines

How to build and run 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.

File Structure

Quick Reference

Directory Description
/api API schema and config files
/config webpack configuration
/devel tools for local development
/src source code
/src/Components source code split by individual components
/src/test test utilities
/src/test/mocks mock handlers and server config for MSW
/src/store Redux store
/src/api.js API calls

Style Guidelines

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

To run the linter, use:

npm run lint

Any errors that can be fixed automatically, can be corrected by running:

npm run lint --fix

All the linting rules and configuration of eslint can be found in .eslintrc.yml.

Additional eslint rules

There are also additional rules added to enforce code style. Those being:

  • import/order -> enforces the order in import statements and separates them into groups based on their type
  • prefer-const -> enforces use of const declaration for variables that are never reassigned
  • no-console -> throws an error for any calls of console methods leftover after debugging

Test Guidelines

This project is tested using the Jest framework, React Testing Library, and the Mock Service Worker library.

All UI contributions must also include a new test or update an existing test in order to maintain code coverage.

Running the tests

To run the unit tests, the linter, and the code coverage check run:

npm run test

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

API endpoints

API slice definitions are generated using the @rtk-query/codegen-openapi package.

OpenAPI schema for the endpoints are stored in /api/schema. Their corresponding configuration files are stored in /api/config. Each endpoint has a corresponding empty API slice and generated API slice which are stored in /src/store.

To generate or update API slice definitions, run:

npm run api