- We want to use the latest and greatest web technologies.
- We want to expose all the options and customizations possible, even if not all are visible by default.
- The default path should be ‘short(est)’ clickpath, which should be determined in a data-driven way.
- This is an Insights application, so it abides by some rules and standards of Insights.
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.
Make sure you have npm@7 and node 15+ installed. If you need multiple versions of nodejs check out nvm.
-
run
npm ci -
run
npm run prod-beta. This command uses a prod-beta env by default. Configure your environment by theenvattribute indev.webpack.config.js. -
Secondly redirect a few
prod.foo.redhat.comto localhost, if this has not been done already.
echo "127.0.0.1 prod.foo.redhat.com" >> /etc/hosts- open browser at
https://prod.foo.redhat.com:1337/beta/insights/image-builder
-
run
npm ci -
run
npm run stage-beta. This command uses a stage-beta env by default. Configure your environment by theenvattribute indev.webpack.config.js. -
Secondly redirect a few
stage.foo.redhat.comto localhost, if this has not been done already.
echo "127.0.0.1 stage.foo.redhat.com" >> /etc/hosts- open browser at
https://stage.foo.redhat.com:1337/beta/insights/image-builder
-
Clone the insights proxy: https://github.com/RedHatInsights/insights-proxy
-
Setting up the proxy
Choose a runner (podman or docker), and point the SPANDX_CONFIG variable to
profile/local-frontend.jsincluded 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 -
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.
API endpoints are programmatically generated with the RTKQ library. This sections overview the steps to add new APIs and endpoints.
For an hypothetical API called foobar
-
Download the foobar api openapi json or yaml representation under
api/schema/foobar.json -
Create a new "empty" api file under
src/store/emptyFoobarApi.tsthat has for content:
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { FOOBAR_API } from '../constants';
// initialize an empty api service that we'll inject endpoints into later as needed
export const emptyFoobarApi = createApi({
reducerPath: 'foobarApi',
baseQuery: fetchBaseQuery({ baseUrl: FOO_BAR }),
endpoints: () => ({}),
});
- Declare the new constat
FOOBAR_APIto the API url insrc/constants.js
export const FOOBAR_API = 'api/foobar/v1'
- Create the config file for code generation in
api/config/foobar.tscontaining:
import type { ConfigFile } from '@rtk-query/codegen-openapi';
const config: ConfigFile = {
schemaFile: '../schema/foobar.json',
apiFile: '../../src/store/emptyFoobarApi.ts',
apiImport: 'emptyEdgeApi',
outputFile: '../../src/store/foobarApi.ts',
exportName: 'foobarApi',
hooks: true,
filterEndpoints: ['getFoo', 'getBar', 'getFoobar'],
};
- Update the
api.shscript by adding a new line for npx to generate the code:
npx @rtk-query/codegen-openapi ./api/config/foobar.ts &
- Update the
.eslintignorefile by adding a new line for the generated code:
foobarApi.ts
- run api generation
npm run api
And voilà!
To add a new endpoint, simply update the api/config/foobar.ts file with new
endpoints in the filterEndpoints table.
Your user needs to have the corresponding rights, do the same as this MR in internal gitlab https://gitlab.cee.redhat.com/service/app-interface/-/merge_requests/79225 you can ask on the slack channel https://redhat-internal.slack.com/archives/C023YSA47A4 for a merge if your MR stays unchecked for a little while.
Then connect to the following platforms:
Once you have a toggle to work with, on the frontend code there's just need to
import the useFlag hook and to use it. You can get some inspiration from
existing flags:
Flags can be mocked for the unit tests to access some feature. Checkout: https://github.com/RedHatInsights/image-builder-frontend/blob/c84b493eba82ce83a7844943943d91112ffe8322/src/test/Components/CreateImageWizard/CreateImageWizard.test.js#L74
If the two possible code path accessible via the toggles are defined in the code base, then it's good practice to test the two of them. If not, only test what's actually owned by the frontend project.
Unleash toggles are expected to live for a limited amount of time, documentation specify 40 days for a release, we should keep that in mind for each toggle we're planning on using.
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 the osbuild-getting-started project.
| 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 |
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 lintAny errors that can be fixed automatically, can be corrected by running:
npm run lint --fixAll the linting rules and configuration of eslint can be found in .eslintrc.yml.
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 typeprefer-const-> enforces use ofconstdeclaration for variables that are never reassignedno-console-> throws an error for any calls ofconsolemethods leftover after debugging
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.
To run the unit tests, the linter, and the code coverage check run:
npm run testThese tests will also be run in our CI when a PR is opened.
If you want to develop in environment with mocked data, run the command npm run stage-beta:msw.
In a case you're seeing Error: [MSW] Failed to register the Service Worker in console, you might also need to configure SSL certification on your computer.
In order to do this install mkcert
After the installation, go to the /node_modules/.cache/webpack-dev-server folder and run following commands:
mkcert -installto create a new certificate authority on your machinemkcert prod.foo.redhat.comto create the actual signed certificate
Follow these steps to find and paste the certification file into the 'Keychain Access' application:
-
Open the 'Keychain Access' application.
-
Select 'login' on the left side.
-
Navigate to the 'Certificates' tab.
-
Drag the certification file (located at /image-builder-frontend/node_modules/.cache/webpack-dev-server/server.pem) to the certification list.
-
Double-click on the added certificate (localhost certificate) to open the localhost window.
-
Open the 'Trust' dropdown menu.
-
Set all options to 'Always Trust'.
-
Close the localhost screen.
-
Run
npm run stage-beta:mswand open the Firefox browser to verify that it is working as expected.
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
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent