Commit graph

102 commits

Author SHA1 Message Date
Sanne Raymaekers
ae7178158e CreateImageWizard: Fix passing gcp upload_options
Upload options were added in the wrong place, this inserts them back
into the correct place.

Also see #1355.
2023-12-01 13:11:07 +01:00
regexowl
ab1987660e Wizard: Add client_id to compose requests
This adds `client_id` value to compose requests for the purpose of differentiating between images created in UI and those created directly via api.
2023-11-28 13:01:00 +01:00
regexowl
44195c5334 Wizard: Remove hard coded architecture from OCI request
This replaces hard coded 'x86_64' architecture with the value based on a form state for OCI images.
2023-11-24 09:08:00 +01:00
regexowl
c2cd4bed97 Wizard: Replace /usr path with sub-directories by /usr on Recreate
Sub-directories for `/usr` prefix are no longer supported in file system configuration. This replaces the possible erroneous path with a valid one so the user is not able to send an invalid image request via Recreate action.
2023-11-22 11:47:23 +01:00
regexowl
fd61cd135b Wizard: Add the option of building OCI images to the Wizard
This adds a tile allowing to build an OCI image to the Image output step of the wizard. The tile is only visible in the Preview.

As there are no other customer information needed for the build, no addiional step for OCI was added.

Review step was also updated to include OCI images.
2023-11-07 11:13:28 +01:00
Thomas Lavocat
938340b360 wizard: allow the creation of aarch64 images
This commit extends the supported architectures to aarch64. In the image
output step (the first one of the wizard) the user is now faced with a
new select choices to pickup the architecture they want to build.

Now the set of compatible targets to build is dynamically loaded from
the backend and the UX changes what's accessible on the fly depending on
what's the user has been selected.

Refs HMS-1135
2023-10-26 20:07:54 +02:00
lucasgarfield
c4d411efa4 Wizard: Improve in-page wizard cosmetically
This commit:
1. Removes the header from the Data Driven Forms wizard
2. Adds padding around the in-page wizard so it is visually consistent
   with the images table
3. Refactors the images table header into a re-usable component that is
   now used in both the images table and the wizard
4. Allows the repositories table to fill the available vertical space in
   the wizard
5. Adjusts the package dual list selectors so that they fill the
   available horizontal space in the wizard
2023-10-20 15:51:03 +02:00
Thomas Lavocat
1c1290f7ed oscap: a policy isn't a profile
There was a mixup on our side between what is a profile and what is a
policy. Long story short, a policy a super set of rules including a
profile. For now the wizard is only able to apply profiles and no
policies on images. So let's fix the terminology there.
2023-10-20 10:46:02 +02:00
Thomas Lavocat
d60c6cb74b oscap: lock the wizard step behind a feature flag
The oscap feature have been quite eagerly pushed forward and it seems we
went a bit fast with it. To take more time and make sure all the
stakeholders agree on the way forward the decision was taken to put this
functionality behind a feature flag.

The two feature flags for both stage and prod are there:
* https://insights-stage.unleash.devshift.net/projects/default/features/image-builder.wizard.oscap.enabled (enabled on stage so we can test the feature)
* https://insights.unleash.devshift.net/projects/default/features/image-builder.wizard.oscap.enabled (disabled on prod)
2023-10-19 10:00:44 +02:00
lucasgarfield
89f1da11bf API: Move notification dispatch to Image Builder API slice
This commit moves the notification dispatching for creating composes and
clones into a more sensible location – the Image Builder API slice.

It is more sensible because it separates the logic of the React
component (the wizard or share images modal) from the logic of handling
the request life cycle (which is now handled entirely in the slice).

There is a subtle but significant change – a new request will be
dispatched for every request. This is the correct way to do things as it
is possible that some requests succeed, and that others fail. Insights
causes the notifications to stack on top of each other neatly, so there
is no UI problem.

To facilitate this, we also need to use use Promise.allSettled instead
of Promise.all.
2023-10-13 11:44:33 +02:00
lucasgarfield
6e018ce7c8 API: Eliminate race condition in Image Builder API slice
The images table uses the useGetComposesQuery hook to fetch composes and
implement pagination. When this query is used, args are provided for the
offset and limit and a 'Compose' tag is provided for the query.

When a mutation is triggered (causing a POST request to be sent to the
`/compose` end point), the 'Compose' tag is invalidated which clears all
cached data from useGetComposesQuery hooks, which in turn causes the
table to refetch compose information.

If invalidating the `Compose` tag causes a refetch before the new compose
is available in image-builder, the result does not contain the new
compose and the table is not updated to include it.

This commit eliminates the race condition by waiting for the query to be
fulfilled before invalidating tags (and therefore before refetching the
data).

All of the above applies equally to the `cloneCompose` mutation, and its
race condition has also been eliminated.

This commit is loosely inspired by the RTK Query docs section on
pessimistic updates:
https://redux-toolkit.js.org/rtk-query/usage/manual-cache-updates#pessimistic-updates

Typescript complains about the type of the tags. It does not recognize
the tag types that are defined in the same enhanceEndpoint() function.
For now, we simply ignore the Typescript errors. There is some
discussion here: https://github.com/reduxjs/redux-toolkit/issues/1510
2023-10-12 08:41:59 +02:00
Thomas Lavocat
cbe710e75e wizard: don't show the form as a modal
When the user clicks on the "create an image" button, the image wizard
shows up replacing the landing page. This allows to keep the quickstart
guides to the right of the wizard while the user is interacting with it.
2023-10-09 11:40:40 +02:00
Thomas Lavocat
3e11639960 wizard: the oscap step is reserved for beta
Do not show the oscap step outside of beta. Only protecting the step
itself is sufficient since the FSC and the Packages steps wont load any
profile data if no entry point allows to get one.

HMS-2077

wizardrecreatebeta
2023-10-06 16:26:09 +02:00
Thomas Lavocat
02a642df19 oscap: add the compliance step to the wizard
This commit adds the Compliance step to the wizard. In this step the
user can select a policy from the list of available policies. Their
image is going to be updated with the necessary changes on the later
steps.

IB and The compliance endpoint are both returning the list of policies a
user has access to. The oscap step computes the intersection of the
policies accessible before showing the select list to the user.

HMS-2077
2023-10-06 16:26:09 +02:00
Adi Abramovich
a890dc5666 wizard: add GCP image sharing options
Adding GCP image sharing option according to the discussion on slack(https://redhat-internal.slack.com/archives/C03AZ0264LW/p1692789579814619) and mocks(https://issues.redhat.com/browse/HMS-2352).

In summary, within our GCP sources, we store the project ID. Images cannot be shared directly with a project ID, but they can be shared with a service account or a Google account. Consequently, to launch instances in GCP, users are not required to provide their Google account; instead, the images should be shared with the provisioning service account. This ensures that the provisioning team has access to the necessary images, as sharing them with individual users would not allow that.

After a thorough discussion, we have collectively decided to introduce an option. This option allows users to exclusively utilize the Launch service without the need to share the image with a Google account.
2023-09-27 13:53:36 +02:00
lucasgarfield
7b9e726151 ImagesTable: Convert ImagesTable to Typescript & RTK Query
This commit converts the Images Table to Typescript and converts all API
calls to image-builder to use RTK Query hooks.

This should increase the performance of the app significantly.
Previously our calls to the image-builder API were made in series. They
are now made in parallel. We may want to investigate the possibility of
hitting rate limiting now that we will be issuing requests in much more
rapid succession.

In the tests, moving to RTK Query hooks has allowed us to remove
virtually all Jest mocking. However, this means that some of our
previous tests which tested against implementation details were broken.
Most notably, we no longer check the Redux store to verify that clones
have been added correctly and we no longer check that compose requests
were issued successfully. Test coverage will be restored in a follow-up
PR where the dev-dependency @msw/data is added. Adding a persistent data
layer to the tests using @msw/data will allow us to verify that our POST
requests (creating composes and cloning them) are working by testing
that the Images Table has been updated.
2023-09-18 10:35:04 +02:00
Sanne Raymaekers
93c1f43544 CreateImageWizard: add WSL image type in preview 2023-08-29 13:37:56 +02:00
Ondrej Ezr
b486f44dcb Custom Repositories gate by Feature flag 2023-08-23 15:38:25 +02:00
regexowl
77ff00d107 lint: Fix the "Expected a default case" warning
This fixes the "Expected a default case" warning
2023-08-23 14:54:23 +02:00
Ondrej Ezr
2a8e5a10df Launch button in stable environments
This moves Beta only features to stable environment:
- Sharing Images through Sources
- Launch button

This tries to avoid any refactoring, just moving components from Beta to stable with minimal changes.
2023-08-23 09:27:25 +02:00
Thomas Lavocat
b8c136dccb wizard: avoid a no-op
This removes a warning on a no-op being fired when the wizard changes a
state when the request for creation comes back as a success.
Instead don't update the form state if the wizard is going to be closed
anyway.
2023-08-09 16:03:00 +02:00
lucasgarfield
1894a9dcb2 API: Add programatically generated Image Builder API slice definitions
These definitions were generated using the RTKQ code generation tool and
will replace the existing definitions.
2023-07-28 15:05:08 +02:00
mgold1234
7cb3f2d0b6 Wizard: add description field to Details steps 2023-07-28 12:24:25 +02:00
mgold1234
5c1952d8c9 Wizard: change the name of wizard details
This commit change the name of wizard-details to details, to prevent misconfusion with the image-name component
2023-07-26 17:13:42 +02:00
regexowl
d03b17de13 Wizard: Remove ModalProps from schema
These changes were introduced in #1079 to ensure that quickstarts stay visible even after opening a Wizard modal as they are both top-most components.

`ModalProps` which were used for this purpose were introduced in version 3.20.6 of `@data-driven-forms/pf4-component-mapper`. Since then we had to regress the version to 3.20.5 as it was crashing the application on closing of a modal. The issue linked to this can be found here: https://github.com/data-driven-forms/react-forms/issues/1389

As we are now using mapper version that does not allow to use `ModalProps` the functionality of the workaround was lost and it was causing following console.error: `Warning: React does not recognize the `ModalProps` prop on a DOM element.`
2023-07-11 17:49:18 +02:00
Sanne Raymaekers
f20686df4d CreateImageWizard: Add support for vsphere-ova imagetype
The OVA type is also the default when checking VMWare now.
2023-07-05 13:02:39 +02:00
lucasgarfield
0fe9770bc3 Wizard: Hotfix for recreate image rate limiting issue
Related to HMS-1886: Clicking the recreate button on a build with a lot
of packages results in the user being rate limited.

Package summaries are obtained by querying the Content Sources API. A
large number of packages requires a large number of requests and leads
to the rate limiting problem when using the 'Recreate image' function.

This commit fixes the problem by not requesting or displaying package
summaries when 'Recreate image' is used. (Note that newly added packages
will still request and display a summary.)

The 'Recreate image' function will soon be replaced by
blueprints. This hotfix should carry us forward until then.
2023-06-05 17:49:18 +02:00
regexowl
83206171f9 ImagesTable: Ensure created_at date for a new image
This adds a temporary value of current date to `created_at` for newly created images.

This is not the most elegant solution and will be reworked after the ImagesTable refactor.
2023-05-04 17:09:47 +02:00
lucasgarfield
383f2a6855 Wizard: Add filtering to repositories
This commit adds filtering based on architecture and version to the
repositories table in the wizard.

Apart from filtering, this commit now shows *all* repositories,
regardless of their status. Previously, invalid repositories were not
displayed. A future PR will add a status column and edge case handling
(how to handle an invalid repo, etc...). For now, invalid repos are
displayed and can be selected.

RTK Query is now used to manage the state of the repositories.
Previously, the repositories were fetched in a useEffect hook upon
opening the wizard.

MSW is now used instead of jest mocking for the tests involving
repositories. The repositories test fixture now contains a function that
mimics the content sources API.
2023-05-04 14:13:17 +02:00
Sanne Raymaekers
23d58d563d CreateImageWizard/Repositories: set custom-repositories
Embed the payload repositories into the image.
2023-05-02 14:33:53 +02:00
Sanne Raymaekers
f0679d1196 CreateImageWizard: rename custom- to payload-repositories
To avoid confusion between custom and payload repositories.

Custom repositories will be embedded in the yum config, payload
repositories are used for installing packages.
2023-05-02 14:33:53 +02:00
lucasgarfield
7bca4c7438 LandingPage/ImagesTable/Wizard: Remove all insights global calls
This commit replaces all calls to the insights.chrome global with calls
to the useChrome() hook (or the useGetEnvironment() custom hook that
wraps useChrome()).
2023-04-28 17:07:31 +02:00
lucasgarfield
b2e6e3cf04 Wizard: Use useChrome hook to set beta feature flag
The use of chrome.isBeta is deprecated, the useChrome hook should be
used instead to obtain an isBeta() function. Using the deprecrated
chrome.isBeta pollutes the browser console with warning messages.

This commit replaces the isBeta() helper function with a new custom
hook, useGetEnvironment().

We still sometimes need to know which environment is running outside of
React components, where we cannot call the useChrome() or
useGetEnvironment() hooks. For instance, in the json used to define a
wizard step. Therefore a new isBeta variable has been added to the
form's initialState for use in these cases.
2023-04-28 17:07:31 +02:00
Pavel Odvody
2f13390eee Add MODAL_ANCHOR and anchor ShareImageModal
This patch adds a constant `MODAL_ANCHOR` so that the value
can be used in multiple modals that require it. Also the
ShareImageModal is now properly anchored to it.

Signed-off-by: Pavel Odvody <pavel@redhat.com>
2023-04-20 17:02:04 +02:00
Pavel Odvody
466f158374 Anchor modal to proper element
By default all modals are anchored to document.body
which interferes with Quickstarts by overlaying them.
This patch anchors the modal to the main element outside
of the Quickstart so that both can be visible at the same time.

Signed-off-by: Pavel Odvody <pavel@redhat.com>
2023-04-20 17:02:04 +02:00
lucasgarfield
bc1435994d Router: Modify /share and /imagewizard routing
Insights offers 'quickstarts', which can be used to provide
mini-tutorials in a sidebar.

Unfortunately, these quickstarts change our URL... they add an optional
query parameter related to the quickstart. The process of doing so
destroys our router's `location`, setting it to undefined.

We have been using the location state to store the GUID of the image,
needed when opening the wizard via the `Recreate image` action or when
opening the share modal.

As a workaround, we can simply accept that the quickstarts will change
our URL and destroy our router's location. Instead, we now put the image
id (its UUID) in the route itself. We can access it in the components as
necessary via the useParams hook.
2023-04-20 14:59:12 +02:00
Ondrej Ezr
065900c0f8 Add sources selection for Azure
Fixes HMS-1511
2023-04-13 13:32:23 +02:00
lucasgarfield
c7add821c2 Wizard: Fix bug causing crash upon visiting Azure step
This commit fixes a bug in the wizard. The Azure step name was
incorrectly set when using the 'Recreate image' option which caused the
wizard to crash when trying to access the Azure step.
2023-04-12 16:33:19 +02:00
Sanne Raymaekers
1df2df1360 CreateImageWizard: show error details on save
Show details when the wizard sends a request that results in an
error. Now that AWS and Azure have a maximum size, this needs to be
shown.
2023-04-03 10:51:54 +02:00
lucasgarfield
4c2a410dd7 Wizard: Expose beta features in qa environment
The QE team has requested that all beta features be exposed in the
ephemeral environment (insights.chrome.getEnvironment() === 'qa').
2023-03-28 09:26:13 +02:00
Sanne Raymaekers
9e6d951641 CreateImageWizard: rhc support 2023-03-08 16:45:31 +01:00
regexowl
753afa197d Wizard: Get distribution repositories from an api endpoint
Previously the base repository links for each distribution were read from `repos.js` file. This gets the needed information
from a call to api endpoint `architectures/{distribution}`. The data is fetched via RTK Query and is then filtered by an
architecture. For now the x86_64 architecture is hardcoded, this will change when multiple architectures get available.
2023-03-07 08:34:03 +01:00
lucasgarfield
53ce67ab47 Wizard: Add beta flag for AWS sources
This commit makes the new AWS sources feature only available in beta.

Note that the RTKQ hooks related to AWS sources are called in several
places outside of the AWS Target step (a prefetch on the Image Output
step and useQuery hook on the review step) but have not been hidden
behind beta flags - this should not present any problems and will make
exposing this feature in stable much easier when the time comes.
2023-03-01 11:25:28 +01:00
lucasgarfield
a474163343 Wizard: Add ability to specify AWS target using sources
This commit adds the ability to specify AWS targets using the sources
service on insights.

This is the first commit to the codebase that makes use of the new RTK
Query endpoints, so I will provide a bit of additional context here:

The sources are obtained by calling the `useGetAWSSourcesQuery()` hook.
This hook can be called in any component where information about the
sources is needed.

A few tricks are used to make the user experience as responsive as
possible.

The `prefetch()` hook provided by RTK Query is called when the user
clicks on the AWS button on the image output step. This triggers the
initial request for the sources, which will then (hopefully) be ready by the
time the user clicks to the next step (the AWS target environment step)
where they are needed.

Because we anticipate a common user workflow to involve using the Create
image wizard in one browser tab and the sources service in another tab,
sources are also refetched every time the source dropdown is opened.
This means that if a user adds a source while in the middle of using the
wizard, they will be able to see it in the wizard's sources dropdown
without refreshing their browser.

Finally, because of the `Recreate image` feature, the
`useGetAWSSourcesQuery` hook also needs to be called on the review step.
2023-03-01 11:25:28 +01:00
lucasgarfield
4000b8d5e5 ESLint: Add prefer-const rule
Require const declarations for variables that are never reassigned after
being declared. If a variable is never reassigned, using the const
declaration is better. const declaration tells readers, “this variable
is never reassigned,” reducing cognitive load and improving
maintainability.
2023-02-10 11:37:06 +01:00
Sanne Raymaekers
3207afce90
config: remove module name in webpack config (#959)
Due to merging the openshift and chrome plugin systems there's
additional requirements on the format of the module name.

Camelcase is the default, so the values can just be removed from the
config.
2023-02-09 12:17:27 +01:00
Sanne Raymaekers
a25ec459d8 CreateImageWizard: use content sources in production beta
Enables package searching and custom repositories.
2023-01-25 16:15:51 +01:00
regexowl
cbd6b1e4cb Wizard: Update the File system step
Fixes #911. Fixes #912.

This updates the File system step. The changes are:
- changed the toggle group for selecting the mode of partitioning to radio select and updated information for each radio button as mentioned in #911
- added information to the "automatic" option of the file system configuration as mentioned in #912
- updated information for the "manual" option of the configuration as mentioned in mocks
2023-01-19 16:07:58 +01:00
lucasgarfield
d4c8d71bd1 Wizard: Clarify variable names and comments in requestToState()
This commit clarifies variable names and comments that were found to be
confusing during the review of 5adc0e.
2023-01-06 10:29:27 +01:00
lucasgarfield
280c11c824 Wizard: Change '3rd party repositories' to 'Custom repositories'
All instances of '3rd party repositories' (and its variations) have been
changed to 'Custom repositories'. This is in better agreement with the
content sources app on consoledot, which generally is called either
'Custom Repositories' or 'Repositories'. Additionally, it is possible to
add and manage Red Hat repositories via content sources, which makes
'3rd party' confusing.
2023-01-04 16:16:25 +01:00