flightctl · celdrake · Mar 4, 2026 · Mar 3, 2026
diff --git a/apps/ocp-plugin/console-extensions.json b/apps/ocp-plugin/console-extensions.json
@@ -35,6 +35,16 @@
       "section": "fctl"
     }
   },
+  {
+    "type": "console.navigation/href",
+    "properties": {
+      "id": "fctl-catalog",
+      "name": "%plugin__flightctl-plugin~Software Catalog%",
+      "href": "/edge/catalog",
+      "perspective": "acm",
+      "section": "fctl"
+    }
+  },
   {
     "type": "console.navigation/href",
     "properties": {
@@ -87,6 +97,14 @@
       "component": { "$codeRef": "FleetDetailsPage" }
     }
   },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": false,
+      "path": ["/edge/fleets/catalog/:fleetId/:catalogId/:itemId"],
+      "component": { "$codeRef": "CatalogEditFleetWizard" }
+    }
+  },
   {
     "type": "console.page/route",
     "properties": {
@@ -111,6 +129,30 @@
       "component": { "$codeRef": "EditDeviceWizardPage" }
     }
   },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": false,
+      "path": ["/edge/devices/catalog/:deviceId/:catalogId/:itemId"],
+      "component": { "$codeRef": "CatalogEditDeviceWizard" }
+    }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": true,
+      "path": ["/edge/catalog"],
+      "component": { "$codeRef": "CatalogPage" }
+    }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": false,
+      "path": ["/edge/catalog/install/:catalogId/:itemId"],
+      "component": { "$codeRef": "CatalogInstallWizard" }
+    }
+  },
   {
     "type": "console.page/route",
     "properties": {

diff --git a/apps/ocp-plugin/package.json b/apps/ocp-plugin/package.json
@@ -28,7 +28,11 @@
       "ResourceSyncToRepositoryPage": "./src/components/ResourceSyncs/ResourceSyncToRepositoryPage.tsx",
       "EnrollmentRequestDetailsPage": "./src/components/EnrollmentRequests/EnrollmentRequestDetailsPage.tsx",
       "appContext": "./src/components/AppContext/AppContext.tsx",
-      "OverviewTab": "./src/components/OverviewTab/OverviewTab.tsx"
+      "OverviewTab": "./src/components/OverviewTab/OverviewTab.tsx",
+      "CatalogPage": "./src/components/Catalog/CatalogPage.tsx",
+      "CatalogInstallWizard": "./src/components/Catalog/CatalogInstallWizard.tsx",
+      "CatalogEditDeviceWizard": "./src/components/Catalog/CatalogEditDeviceWizard.tsx",
+      "CatalogEditFleetWizard": "./src/components/Catalog/CatalogEditFleetWizard.tsx"
     },
     "dependencies": {
       "@console/pluginAPI": "*"
@@ -74,6 +78,7 @@
     "@patternfly/react-icons": "^6.4.0",
     "@patternfly/react-styles": "^6.4.0",
     "@patternfly/react-table": "^6.4.0",
+    "@patternfly/react-topology": "^6.4.0",
     "@types/react-redux": "^7.1.33",
     "formik": "^2.4.5",
     "fuzzysearch": "^1.0.3",

diff --git a/apps/ocp-plugin/src/components/AppContext/AppContext.tsx b/apps/ocp-plugin/src/components/AppContext/AppContext.tsx
@@ -64,6 +64,10 @@ const appRoutes = {
   [ROUTE.AUTH_PROVIDER_CREATE]: '/',
   [ROUTE.AUTH_PROVIDER_EDIT]: '/',
   [ROUTE.AUTH_PROVIDER_DETAILS]: '/',
+  [ROUTE.CATALOG]: '/edge/catalog',
+  [ROUTE.CATALOG_INSTALL]: '/edge/catalog/install',
+  [ROUTE.CATALOG_FLEET_EDIT]: '/edge/fleets/catalog',
+  [ROUTE.CATALOG_DEVICE_EDIT]: '/edge/devices/catalog',
 };
 
 export const useValuesAppContext = (): AppContextProps => {

diff --git a/apps/ocp-plugin/src/components/Catalog/CatalogEditDeviceWizard.tsx b/apps/ocp-plugin/src/components/Catalog/CatalogEditDeviceWizard.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { EditDeviceWizard } from '@flightctl/ui-components/src/components/Catalog/EditWizard/EditWizard';
+import WithPageLayout from '../common/WithPageLayout';
+
+const CatalogEditDeviceWizard = () => {
+  return (
+    <WithPageLayout>
+      <EditDeviceWizard />
+    </WithPageLayout>
+  );
+};
+
+export default CatalogEditDeviceWizard;
diff --git a/apps/ocp-plugin/src/components/Catalog/CatalogEditFleetWizard.tsx b/apps/ocp-plugin/src/components/Catalog/CatalogEditFleetWizard.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { EditFleetWizard } from '@flightctl/ui-components/src/components/Catalog/EditWizard/EditWizard';
+import WithPageLayout from '../common/WithPageLayout';
+
+const CatalogEditFleetWizard = () => {
+  return (
+    <WithPageLayout>
+      <EditFleetWizard />
+    </WithPageLayout>
+  );
+};
+
+export default CatalogEditFleetWizard;
diff --git a/apps/ocp-plugin/src/components/Catalog/CatalogInstallWizard.tsx b/apps/ocp-plugin/src/components/Catalog/CatalogInstallWizard.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import InstallWizard from '@flightctl/ui-components/src/components/Catalog/InstallWizard/InstallWizard';
+import WithPageLayout from '../common/WithPageLayout';
+
+const OcpInstallWizard = () => {
+  return (
+    <WithPageLayout>
+      <InstallWizard />
+    </WithPageLayout>
+  );
+};
+
+export default OcpInstallWizard;
diff --git a/apps/ocp-plugin/src/components/Catalog/CatalogPage.tsx b/apps/ocp-plugin/src/components/Catalog/CatalogPage.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import CatalogPage from '@flightctl/ui-components/src/components/Catalog/CatalogPage';
+import WithPageLayout from '../common/WithPageLayout';
+
+const OcpCatalogPage = () => {
+  return (
+    <WithPageLayout>
+      <CatalogPage />
+    </WithPageLayout>
+  );
+};
+
+export default OcpCatalogPage;
diff --git a/apps/ocp-plugin/src/typings.d.ts b/apps/ocp-plugin/src/typings.d.ts
@@ -0,0 +1,15 @@
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.gif';
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+declare module '*.css';
+declare module '*.wav';
+declare module '*.mp3';
+declare module '*.m4a';
+declare module '*.rdf';
+declare module '*.ttl';
+declare module '*.pdf';
diff --git a/apps/ocp-plugin/src/utils/apiCalls.ts b/apps/ocp-plugin/src/utils/apiCalls.ts
@@ -16,7 +16,7 @@ declare global {
   }
 }
 
-type Api = 'flightctl' | 'imagebuilder' | 'alerts';
+type Api = 'flightctl' | 'imagebuilder' | 'alerts' | 'catalog';
 
 const addRequiredHeaders = (options: RequestInit, api?: Api): RequestInit => {
   const token = getCSRFToken();
@@ -47,6 +47,8 @@ export const uiProxy = `${window.location.protocol}//${apiServer}`;
 const flightCtlAPI = `${uiProxy}/api/flightctl`;
 const alertsAPI = `${uiProxy}/api/alerts`;
 const imageBuilderPathRegex = /^image(builds|exports)/;
+const catalogPathRegex = /^(catalogs|catalogitems)/;
+
 export const wsEndpoint = `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${apiServer}`;
 
 export const fetchUiProxy = async (endpoint: string, requestInit: RequestInit): Promise<Response> => {
@@ -62,6 +64,12 @@ const getFullApiUrl = (path: string): { api: Api; url: string } => {
   if (imageBuilderPathRegex.test(path)) {
     return { api: 'imagebuilder', url: `${uiProxy}/api/imagebuilder/api/v1/${path}` };
   }
+  if (catalogPathRegex.test(path)) {
+    return {
+      api: 'catalog',
+      url: `${flightCtlAPI}/api/v1/${path}`,
+    };
+  }
   return { api: 'flightctl', url: `${flightCtlAPI}/api/v1/${path}` };
 };
 

diff --git a/apps/ocp-plugin/tsconfig.json b/apps/ocp-plugin/tsconfig.json
@@ -24,6 +24,7 @@
       "@flightctl/ui-components/*": ["../../libs/ui-components/*"],
       "@flightctl/types": ["../../libs/types"],
       "@flightctl/types/imagebuilder": ["../../libs/types/imagebuilder"],
+      "@flightctl/types/alpha": ["../../libs/types/alpha"],
     },
   },
   "include": ["**/*.ts", "**/*.tsx", "**/*.jsx", "**/*.js", "**/*.json"],

diff --git a/apps/ocp-plugin/webpack.config.ts b/apps/ocp-plugin/webpack.config.ts
@@ -50,7 +50,15 @@ const config: Configuration & {
         use: ['style-loader', 'css-loader'],
       },
       {
-        test: /\.(png|jpg|jpeg|gif|svg|woff2?|ttf|eot|otf)(\?.*$|$)/,
+        test: /\.(jpg|jpeg|png|gif|svg)$/i,
+        include: [path.resolve(__dirname, '../../libs/ui-components/assets')],
+        type: 'asset/resource',
+        generator: {
+          filename: 'assets/[name].[ext]',
+        },
+      },
+      {
+        test: /\.(woff2?|ttf|eot|otf)(\?.*$|$)/,
         loader: 'file-loader',
         options: {
           name: 'assets/[name].[ext]',

diff --git a/apps/standalone/package.json b/apps/standalone/package.json
@@ -47,6 +47,7 @@
     "@patternfly/react-icons": "^6.4.0",
     "@patternfly/react-styles": "^6.4.0",
     "@patternfly/react-table": "^6.4.0",
+    "@patternfly/react-topology": "^6.4.0",
     "formik": "^2.4.5",
     "fuzzysearch": "^1.0.3",
     "i18next": "^21.8.14",

diff --git a/apps/standalone/src/app/routes.tsx b/apps/standalone/src/app/routes.tsx
@@ -84,6 +84,22 @@ const CreateImageBuildWizard = React.lazy(
   () => import('@flightctl/ui-components/src/components/ImageBuilds/CreateImageBuildWizard/CreateImageBuildWizard'),
 );
 
+const CatalogPage = React.lazy(() => import('@flightctl/ui-components/src/components/Catalog/CatalogPage'));
+const CatalogInstallWizard = React.lazy(
+  () => import('@flightctl/ui-components/src/components/Catalog/InstallWizard/InstallWizard'),
+);
+const CatalogEditFleetWizard = React.lazy(() =>
+  import('@flightctl/ui-components/src/components/Catalog/EditWizard/EditWizard').then((module) => ({
+    default: module.EditFleetWizard,
+  })),
+);
+
+const CatalogEditDeviceWizard = React.lazy(() =>
+  import('@flightctl/ui-components/src/components/Catalog/EditWizard/EditWizard').then((module) => ({
+    default: module.EditDeviceWizard,
+  })),
+);
+
 export type ExtendedRouteObject = RouteObject & {
   title?: string;
   showInNav?: boolean;
@@ -215,6 +231,15 @@ const getAppRoutes = (t: TFunction): ExtendedRouteObject[] => [
           </TitledRoute>
         ),
       },
+      {
+        path: 'catalog/:fleetId/:catalogId/:itemId',
+        title: t('Edit Fleet'),
+        element: (
+          <TitledRoute title={t('Edit Fleet')}>
+            <CatalogEditFleetWizard />
+          </TitledRoute>
+        ),
+      },
       {
         path: ':fleetId/*',
         title: t('Fleet Details'),
@@ -264,6 +289,40 @@ const getAppRoutes = (t: TFunction): ExtendedRouteObject[] => [
           </TitledRoute>
         ),
       },
+      {
+        path: 'catalog/:deviceId/:catalogId/:itemId',
+        title: t('Edit device'),
+        element: (
+          <TitledRoute title={t('Edit device')}>
+            <CatalogEditDeviceWizard />
+          </TitledRoute>
+        ),
+      },
+    ],
+  },
+  {
+    path: '/catalog',
+    title: t('Software Catalog'),
+    showInNav: true,
+    children: [
+      {
+        index: true,
+        title: t('Software Catalog'),
+        element: (
+          <TitledRoute title={t('Catalog')}>
+            <CatalogPage />
+          </TitledRoute>
+        ),
+      },
+      {
+        path: 'install/:catalogId/:itemId',
+        title: t('Install Catalog item'),
+        element: (
+          <TitledRoute title={t('Install Catalog item')}>
+            <CatalogInstallWizard />
+          </TitledRoute>
+        ),
+      },
     ],
   },
   {

diff --git a/apps/standalone/src/app/utils/apiCalls.ts b/apps/standalone/src/app/utils/apiCalls.ts
@@ -16,6 +16,7 @@ const flightCtlAPI = `${window.location.protocol}//${apiServer}/api/flightctl`;
 const uiProxyAPI = `${window.location.protocol}//${apiServer}/api`;
 
 const imageBuilderPathRegex = /^image(builds|exports)/;
+const catalogPathRegex = /^(catalogs|catalogitems)/;
 
 export const loginAPI = `${window.location.protocol}//${apiServer}/api/login`;
 export const wsEndpoint = `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${apiServer}`;
@@ -45,13 +46,19 @@ export const fetchUiProxy = async (endpoint: string, requestInit: RequestInit):
   return await fetch(`${uiProxyAPI}/${endpoint}`, options);
 };
 
-const getFullApiUrl = (path: string): { api: 'flightctl' | 'imagebuilder' | 'alerts'; url: string } => {
+const getFullApiUrl = (path: string): { api: 'flightctl' | 'imagebuilder' | 'alerts' | 'catalog'; url: string } => {
   if (path.startsWith('alerts')) {
     return { api: 'alerts', url: `${uiProxyAPI}/alerts/api/v2/${path}` };
   }
   if (imageBuilderPathRegex.test(path)) {
     return { api: 'imagebuilder', url: `${uiProxyAPI}/imagebuilder/api/v1/${path}` };
   }
+  if (catalogPathRegex.test(path)) {
+    return {
+      api: 'catalog',
+      url: `${flightCtlAPI}/api/v1/${path}`,
+    };
+  }
   return { api: 'flightctl', url: `${flightCtlAPI}/api/v1/${path}` };
 };
 

diff --git a/apps/standalone/tsconfig.json b/apps/standalone/tsconfig.json
@@ -25,6 +25,7 @@
       "@flightctl/ui-components/*": ["../../libs/ui-components/*"],
       "@flightctl/types": ["../../libs/types"],
       "@flightctl/types/imagebuilder": ["../../libs/types/imagebuilder"],
+      "@flightctl/types/alpha": ["../../libs/types/alpha"],
     },
   },
   "include": ["**/*.ts", "**/*.tsx", "**/*.jsx", "**/*.js", "**/*.json"],

diff --git a/apps/standalone/webpack.config.ts b/apps/standalone/webpack.config.ts
@@ -109,6 +109,7 @@ const config: Configuration & {
         include: [
           path.resolve(__dirname, 'src'),
           path.resolve(__dirname, 'src/assets/images'),
+          path.resolve(__dirname, '../../libs/ui-components/assets'),
           path.resolve(__dirname, 'node_modules/patternfly'),
           path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/images'),
           path.resolve(__dirname, 'node_modules/@patternfly/react-styles/css/assets/images'),
@@ -127,15 +128,6 @@ const config: Configuration & {
           ),
         ],
         type: 'asset/inline',
-        use: [
-          {
-            options: {
-              limit: 5000,
-              outputPath: 'images',
-              name: '[name].[ext]',
-            },
-          },
-        ],
       },
     ],
   },