Added image-builder-frontend repository as a Cockpit package #2424

mgold1234 · 2024-09-11T15:29:26Z

Align Insights IB Service and IB On-Prem UI with Unified Blueprint and Image Functionality

Implemented identical UI components for both Insights IB service and IB on-prem.
Standardized blueprint functionalities, allowing creation, editing, and import/export operations.
Unified image-building capabilities based on blueprints.
Maximized code sharing and reuse by abstracting common functionalities.
Utilized RTK Query (RTKQ) for efficient communication with two distinct APIs: image-builder (service) and cloud-api (on-prem).
Packaged IB on-prem as an RPM, making it compatible with RHEL, CentOS, and Fedora distributions, and integrated it as a Cockpit plugin for streamlined deployment.

codecov · 2024-09-12T09:48:27Z

Codecov Report

Attention: Patch coverage is 31.25000% with 110 lines in your changes missing coverage. Please review.

Project coverage is 83.18%. Comparing base (1a7350e) to head (b3044aa).
Report is 2154 commits behind head on main.

Files with missing lines	Patch %	Lines
src/Components/ImagesTable/ImagesTable.tsx	21.51%	62 Missing ⚠️
src/AppCockpit.tsx	0.00%	29 Missing and 1 partial ⚠️
src/Router.tsx	0.00%	8 Missing ⚠️
src/store/cockpitApi.ts	52.94%	8 Missing ⚠️
src/Utilities/useGetEnvironment.ts	81.81%	2 Missing ⚠️

@@            Coverage Diff             @@
##             main    #2424      +/-   ##
==========================================
+ Coverage   75.71%   83.18%   +7.46%     
==========================================
  Files          33      156     +123     
  Lines         597    17374   +16777     
  Branches      144     1683    +1539     
==========================================
+ Hits          452    14452   +14000     
- Misses        139     2902    +2763     
- Partials        6       20      +14

Files with missing lines	Coverage Δ
src/Components/LandingPage/LandingPage.tsx	`95.10% <100.00%> (ø)`
...Components/sharedComponents/ImageBuilderHeader.tsx	`100.00% <100.00%> (ø)`
src/constants.ts	`100.00% <100.00%> (ø)`
src/store/emptyCockpitApi.ts	`100.00% <100.00%> (ø)`
src/store/index.ts	`98.66% <100.00%> (ø)`
src/Utilities/useGetEnvironment.ts	`85.71% <81.81%> (ø)`
src/Router.tsx	`0.00% <0.00%> (ø)`
src/store/cockpitApi.ts	`52.94% <52.94%> (ø)`
src/AppCockpit.tsx	`0.00% <0.00%> (ø)`
src/Components/ImagesTable/ImagesTable.tsx	`81.66% <21.51%> (ø)`

... and 2 files with indirect coverage changes

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3c1f834...b3044aa. Read the comment docs.

croissanne

Thank you! Just a general first comment, to make this a little easier to review, could you maybe split it out into several commits? Having a good description for each one? The current commit message doesn't describe all the changes made.

src/Components/ImagesTable/EmptyState.tsx

src/Components/LandingPage/BlueprintEmpty.tsx

fec.config.js

cockpit/webpack.config.js

package.json

src/Router.tsx

regexowl · 2024-09-13T06:43:12Z

Is this a duplicate of #2412? Can you please close a PR that is not needed anymore?

mgold1234 · 2024-09-13T14:14:52Z

@regexowl I moved #2412 to draft becuase I still need it, hope its ok

regexowl · 2024-09-13T14:19:27Z

@mgold1234 Yup, perfectly fine, thank you!

croissanne

Cool that we can reuse the router :) Mostly style comments.

src/Router.tsx

src/Components/LandingPage/ImagesEmpty.tsx

changes that allow to build and run in both onPremise (Cockpit) and Saas environments. Configured webpack with necessary loaders and plugins. `AppCockpit` file and `cockpit:build`, `cockpit:install` scripts were added for Cockpit compatibility. added alias to fec.config.js to seperate Saas modules

We need to integrate a new API service for managing blueprints and update the Redux store to handle blueprint-related data in a Cockpit environment. This will allow us to fetch, store, and manage blueprints effectively within the application. Created a new 'cockpitApi' service to handle the API calls related to blueprints in cockpit env. Added a 'blueprintsReducer' to the Redux store to manage blueprint state. Added a new 'emptyCockpitApi' file for the blueprint API setup, including type definitions and query configurations.

- define isOnPremise boolean variable to check if its onPrem env. - define useGetFeatureFlag hook to return false in on-premise environments and dynamically call the appropriate hook (useFlag or useFlagWithEphemDefault) based on the feature flag name. Improved structure by avoiding hook calls inside conditionals to adhere to React rules

lucasgarfield · 2024-10-08T13:00:54Z

src/store/cockpitApi.ts

+} from './imageBuilderApi';
+
+// Injects API endpoints into the service for querying blueprints
+export const blueprintsReducer = api.injectEndpoints({


This looks good, but we need to teach it how to actually return a GetBlueprintsApiResponse object.

You'll want to use a queryFn, check the RTKQ docs here:
https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#customizing-queries-with-queryfn

You might want to use the Cockpit Files API to read in the blueprints from a directory, docs here: https://cockpit-project.org/guide/latest/cockpit-file

We haven't 100% decided on the directory yet, but perhaps ~/.local/share/image-builder/blueprints.

croissanne

This is looking quite good I think, some compiler errors however, but I like the usage of queryFn!

croissanne · 2024-10-09T09:47:29Z

cockpit/public/index.html

+<div id="main"></div>
+<script defer src="main.js"></script>
+</body>
+</html>


Can you indent this file properly?

croissanne · 2024-10-09T09:48:24Z

src/store/cockpitApi.ts

- offset: queryArg.offset,
- },
- }),
+ queryFn: async () => {


this is great, very neat!

croissanne · 2024-10-09T09:50:30Z

src/Utilities/useGetEnvironment.ts

+ if (isOnPremise) {
+ return false;
+ }
+ if (


I wonder if a switch statement makes it easier to read here.

croissanne · 2024-10-09T09:54:46Z

src/Components/CreateImageWizard/CreateImageWizard.tsx

@@ -150,10 +153,12 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {

 // =========================TO REMOVE=======================


hmm is this comment still valid now? or should it move down?

mgold1234 requested a review from croissanne September 11, 2024 15:29

mgold1234 force-pushed the first_cockpit branch 5 times, most recently from d626d14 to d020097 Compare September 12, 2024 09:39

mgold1234 requested a review from lucasgarfield September 12, 2024 09:43

croissanne reviewed Sep 12, 2024

View reviewed changes

mgold1234 force-pushed the first_cockpit branch 2 times, most recently from 08ce8c7 to fcdf7eb Compare September 12, 2024 16:25

mgold1234 force-pushed the first_cockpit branch from fcdf7eb to b56aeef Compare September 13, 2024 15:11

mgold1234 requested a review from croissanne September 13, 2024 15:12

mgold1234 force-pushed the first_cockpit branch 7 times, most recently from 4987b36 to de18012 Compare September 16, 2024 09:08

croissanne requested changes Sep 16, 2024

View reviewed changes

src/Router.tsx Outdated Show resolved Hide resolved

src/Router.tsx Outdated Show resolved Hide resolved

src/Router.tsx Outdated Show resolved Hide resolved

croissanne reviewed Sep 16, 2024

View reviewed changes

src/Components/LandingPage/ImagesEmpty.tsx Outdated Show resolved Hide resolved

mgold1234 force-pushed the first_cockpit branch 2 times, most recently from a3a6a8a to 9e93e2d Compare September 17, 2024 08:57

mgold1234 requested a review from croissanne September 17, 2024 12:10

mgold1234 force-pushed the first_cockpit branch 2 times, most recently from ce6617b to ce5cdaa Compare September 17, 2024 12:27

mgold1234 force-pushed the first_cockpit branch 2 times, most recently from c2e1e23 to 4be467d Compare September 30, 2024 11:29

mgold1234 requested review from lucasgarfield and amirfefer September 30, 2024 12:53

mgold1234 force-pushed the first_cockpit branch 12 times, most recently from 9b32e44 to 0602a7f Compare October 7, 2024 08:02

mgold1234 added 4 commits October 7, 2024 11:22

update README file with cockpit changes

07daedc

mgold1234 force-pushed the first_cockpit branch 2 times, most recently from 3802aa7 to 68310a9 Compare October 8, 2024 08:52

add getArchitectures to cockpit

fb07925

mgold1234 force-pushed the first_cockpit branch from 68310a9 to fb07925 Compare October 8, 2024 09:39

lucasgarfield reviewed Oct 8, 2024

View reviewed changes

mgold1234 force-pushed the first_cockpit branch from 227e7bd to 6a5e029 Compare October 9, 2024 09:38

croissanne reviewed Oct 9, 2024

View reviewed changes

implement the queryFn with empty object

b75bf5a

mgold1234 force-pushed the first_cockpit branch from 6a5e029 to b75bf5a Compare October 9, 2024 09:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added image-builder-frontend repository as a Cockpit package #2424

Added image-builder-frontend repository as a Cockpit package #2424

mgold1234 commented Sep 11, 2024 •

edited

Loading

codecov bot commented Sep 12, 2024 •

edited

Loading

croissanne left a comment •

edited

Loading

regexowl commented Sep 13, 2024

mgold1234 commented Sep 13, 2024

regexowl commented Sep 13, 2024

croissanne left a comment

lucasgarfield Oct 8, 2024

croissanne left a comment

croissanne Oct 9, 2024

croissanne Oct 9, 2024

croissanne Oct 9, 2024

croissanne Oct 9, 2024

		@@ -150,10 +153,12 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {

		// =========================TO REMOVE=======================

Added image-builder-frontend repository as a Cockpit package #2424

Are you sure you want to change the base?

Added image-builder-frontend repository as a Cockpit package #2424

Conversation

mgold1234 commented Sep 11, 2024 • edited Loading

codecov bot commented Sep 12, 2024 • edited Loading

Codecov Report

croissanne left a comment • edited Loading

Choose a reason for hiding this comment

regexowl commented Sep 13, 2024

mgold1234 commented Sep 13, 2024

regexowl commented Sep 13, 2024

croissanne left a comment

Choose a reason for hiding this comment

lucasgarfield Oct 8, 2024

Choose a reason for hiding this comment

croissanne left a comment

Choose a reason for hiding this comment

croissanne Oct 9, 2024

Choose a reason for hiding this comment

croissanne Oct 9, 2024

Choose a reason for hiding this comment

croissanne Oct 9, 2024

Choose a reason for hiding this comment

croissanne Oct 9, 2024

Choose a reason for hiding this comment

mgold1234 commented Sep 11, 2024 •

edited

Loading

codecov bot commented Sep 12, 2024 •

edited

Loading

croissanne left a comment •

edited

Loading