EDM-2611: UI for Image building to quickly enroll new devices

CONFIGURATION.md

@@ -11,19 +11,20 @@ This document describes all environment variables and configuration options avai
 
 ## Backend configuration
 
-| Variable                                | Description                          | Default                  | Values                                 |
-| --------------------------------------- | ------------------------------------ | ------------------------ | -------------------------------------- |
-| `BASE_UI_URL`                           | Base URL for UI application          | `http://localhost:9000`  | `https://ui.flightctl.example.com`     |
-| `FLIGHTCTL_SERVER`                      | Flight Control API server URL        | `https://localhost:3443` | `https://api.flightctl.example.com`    |
-| `FLIGHTCTL_SERVER_INSECURE_SKIP_VERIFY` | Skip backend server TLS verification | `false`                  | `true`, `false`                        |
-| `FLIGHTCTL_CLI_ARTIFACTS_SERVER`        | CLI artifacts server URL             | `http://localhost:8090`  | `https://cli.flightctl.example.com`    |
-| `FLIGHTCTL_ALERTMANAGER_PROXY`          | AlertManager proxy server URL        | `https://localhost:8443` | `https://alerts.flightctl.example.com` |
-| `AUTH_INSECURE_SKIP_VERIFY`             | Skip auth server TLS verification    | `false`                  | `true`, `false`                        |
-| `TLS_CERT`                              | Path to TLS certificate              | _(empty)_                | `/path/to/server.crt`                  |
-| `TLS_KEY`                               | Path to TLS private key              | _(empty)_                | `/path/to/server.key`                  |
-| `API_PORT`                              | UI proxy server port                 | `3001`                   | `8080`, `3000`, etc.                   |
-| `IS_OCP_PLUGIN`                         | Run as OpenShift Console plugin      | `false`                  | `true`, `false`                        |
-| `IS_RHEM`                               | Red Hat Enterprise Mode              | _(empty)_                | `true`, `false`                        |
+| Variable                                | Description                          | Default                  | Values                                       |
+| --------------------------------------- | ------------------------------------ | ------------------------ | -------------------------------------------- |
+| `BASE_UI_URL`                           | Base URL for UI application          | `http://localhost:9000`  | `https://ui.flightctl.example.com`           |
+| `FLIGHTCTL_SERVER`                      | Flight Control API server URL        | `https://localhost:3443` | `https://api.flightctl.example.com`          |
+| `FLIGHTCTL_SERVER_INSECURE_SKIP_VERIFY` | Skip backend server TLS verification | `false`                  | `true`, `false`                              |
+| `FLIGHTCTL_CLI_ARTIFACTS_SERVER`        | CLI artifacts server URL             | `http://localhost:8090`  | `https://cli.flightctl.example.com`          |
+| `FLIGHTCTL_ALERTMANAGER_PROXY`          | AlertManager proxy server URL        | `https://localhost:8443` | `https://alerts.flightctl.example.com`       |
+| `FLIGHTCTL_IMAGEBUILDER_SERVER`         | ImageBuilder API server URL          | `https://localhost:8445` | `https://imagebuilder.flightctl.example.com` |
+| `AUTH_INSECURE_SKIP_VERIFY`             | Skip auth server TLS verification    | `false`                  | `true`, `false`                              |
+| `TLS_CERT`                              | Path to TLS certificate              | _(empty)_                | `/path/to/server.crt`                        |
+| `TLS_KEY`                               | Path to TLS private key              | _(empty)_                | `/path/to/server.key`                        |
+| `API_PORT`                              | UI proxy server port                 | `3001`                   | `8080`, `3000`, etc.                         |
+| `IS_OCP_PLUGIN`                         | Run as OpenShift Console plugin      | `false`                  | `true`, `false`                              |
+| `IS_RHEM`                               | Red Hat Enterprise Mode              | _(empty)_                | `true`, `false`                              |
 
 ## Configuration examples
 

apps/ocp-plugin/console-extensions.json

@@ -45,6 +45,16 @@
       "section": "fctl"
     }
   },
+  {
+    "type": "console.navigation/href",
+    "properties": {
+      "id": "fctl-imagebuilds",
+      "name": "%plugin__flightctl-plugin~Image builds%",
+      "href": "/edge/imagebuilds",
+      "perspective": "acm",
+      "section": "fctl"
+    }
+  },
   {
     "type": "console.page/route",
     "properties": {
@@ -125,6 +135,30 @@
       "component": { "$codeRef": "RepositoryDetailsPage" }
     }
   },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": true,
+      "path": ["/edge/imagebuilds"],
+      "component": { "$codeRef": "ImageBuildsPage" }
+    }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": true,
+      "path": ["/edge/imagebuilds/create", "/edge/imagebuilds/edit/:imageBuildId"],
+      "component": { "$codeRef": "CreateImageBuildWizardPage" }
+    }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": false,
+      "path": ["/edge/imagebuilds/:imageBuildId"],
+      "component": { "$codeRef": "ImageBuildDetailsPage" }
+    }
+  },
   {
     "type": "console.page/route",
     "properties": {

apps/ocp-plugin/package.json

@@ -22,6 +22,9 @@
       "RepositoriesPage": "./src/components/Repositories/RepositoriesPage.tsx",
       "RepositoryDetailsPage": "./src/components/Repositories/RepositoryDetailsPage.tsx",
       "CreateRepositoryPage": "./src/components/Repositories/CreateRepositoryPage.tsx",
+      "ImageBuildsPage": "./src/components/ImageBuilds/ImageBuildsPage.tsx",
+      "ImageBuildDetailsPage": "./src/components/ImageBuilds/ImageBuildDetailsPage.tsx",
+      "CreateImageBuildWizardPage": "./src/components/ImageBuilds/CreateImageBuildWizardPage.tsx",
       "ResourceSyncToRepositoryPage": "./src/components/ResourceSyncs/ResourceSyncToRepositoryPage.tsx",
       "EnrollmentRequestDetailsPage": "./src/components/EnrollmentRequests/EnrollmentRequestDetailsPage.tsx",
       "appContext": "./src/components/AppContext/AppContext.tsx",

apps/ocp-plugin/src/components/AppContext/AppContext.tsx

@@ -50,6 +50,10 @@ const appRoutes = {
   [ROUTE.REPO_EDIT]: '/edge/repositories/edit',
   [ROUTE.REPO_DETAILS]: '/edge/repositories',
   [ROUTE.REPOSITORIES]: '/edge/repositories',
+  [ROUTE.IMAGE_BUILDS]: '/edge/imagebuilds',
+  [ROUTE.IMAGE_BUILD_CREATE]: '/edge/imagebuilds/create',
+  [ROUTE.IMAGE_BUILD_DETAILS]: '/edge/imagebuilds',
+  [ROUTE.IMAGE_BUILD_EDIT]: '/edge/imagebuilds/edit',
   [ROUTE.RESOURCE_SYNC_DETAILS]: '/edge/resourcesyncs',
   [ROUTE.ENROLLMENT_REQUESTS]: '/edge/enrollmentrequests',
   [ROUTE.ENROLLMENT_REQUEST_DETAILS]: '/edge/enrollmentrequests',

apps/ocp-plugin/src/components/ImageBuilds/CreateImageBuildWizardPage.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import CreateImageBuildWizard from '@flightctl/ui-components/src/components/ImageBuilds/CreateImageBuildWizard/CreateImageBuildWizard';
+import WithPageLayout from '../common/WithPageLayout';
+
+const CreateImageBuildWizardPage = () => {
+  return (
+    <WithPageLayout>
+      <CreateImageBuildWizard />
+    </WithPageLayout>
+  );
+};
+
+export default CreateImageBuildWizardPage;

apps/ocp-plugin/src/components/ImageBuilds/ImageBuildDetailsPage.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import ImageBuildDetails from '@flightctl/ui-components/src/components/ImageBuilds/ImageBuildDetails/ImageBuildDetailsPage';
+import WithPageLayout from '../common/WithPageLayout';
+
+const OcpImageBuildDetailsPage = () => {
+  return (
+    <WithPageLayout>
+      <ImageBuildDetails />
+    </WithPageLayout>
+  );
+};
+
+export default OcpImageBuildDetailsPage;

apps/ocp-plugin/src/components/ImageBuilds/ImageBuildsPage.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import ImageBuildsPage from '@flightctl/ui-components/src/components/ImageBuilds/ImageBuildsPage';
+import WithPageLayout from '../common/WithPageLayout';
+
+const OcpImageBuildsPage = () => {
+  return (
+    <WithPageLayout>
+      <ImageBuildsPage />
+    </WithPageLayout>
+  );
+};
+
+export default OcpImageBuildsPage;

apps/ocp-plugin/src/utils/apiCalls.ts

@@ -38,6 +38,7 @@ const apiServer = `${window.location.hostname}${
 export const uiProxy = `${window.location.protocol}//${apiServer}`;
 const flightCtlAPI = `${uiProxy}/api/flightctl`;
 const alertsAPI = `${uiProxy}/api/alerts`;
+const imageBuilderPathRegex = /^image(builds|exports)/;
 export const wsEndpoint = `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${apiServer}`;
 
 export const fetchUiProxy = async (endpoint: string, requestInit: RequestInit): Promise<Response> => {
@@ -50,6 +51,9 @@ const getFullApiUrl = (path: string) => {
   if (path.startsWith('alerts')) {
     return { api: 'alerts', url: `${alertsAPI}/api/v2/${path}` };
   }
+  if (imageBuilderPathRegex.test(path)) {
+    return { api: 'imagebuilder', url: `${uiProxy}/imagebuilder/api/v1/${path}` };
+  }
   return { api: 'flightctl', url: `${flightCtlAPI}/api/v1/${path}` };
 };
 
@@ -102,7 +106,8 @@ const putOrPostData = async <TRequest, TResponse = TRequest>(
 
   const options = addRequiredHeaders(baseOptions);
   try {
-    const response = await fetch(`${flightCtlAPI}/api/v1/${kind}`, options);
+    const { url } = getFullApiUrl(kind);
+    const response = await fetch(url, options);
     return handleApiJSONResponse(response);
   } catch (error) {
     console.error(`Error making ${method} request for ${kind}:`, error);
@@ -124,7 +129,8 @@ export const deleteData = async <R>(kind: string, abortSignal?: AbortSignal): Pr
 
   const options = addRequiredHeaders(baseOptions);
   try {
-    const response = await fetch(`${flightCtlAPI}/api/v1/${kind}`, options);
+    const { url } = getFullApiUrl(kind);
+    const response = await fetch(url, options);
     return handleApiJSONResponse(response);
   } catch (error) {
     console.error('Error making DELETE request:', error);
@@ -144,7 +150,8 @@ export const patchData = async <R>(kind: string, data: PatchRequest, abortSignal
 
   const options = addRequiredHeaders(baseOptions);
   try {
-    const response = await fetch(`${flightCtlAPI}/api/v1/${kind}`, options);
+    const { url } = getFullApiUrl(kind);
+    const response = await fetch(url, options);
     return handleApiJSONResponse(response);
   } catch (error) {
     console.error('Error making PATCH request:', error);

apps/ocp-plugin/tsconfig.json

@@ -23,6 +23,7 @@
     "paths": {
       "@flightctl/ui-components/*": ["../../libs/ui-components/*"],
       "@flightctl/types": ["../../libs/types"],
+      "@flightctl/types/imagebuilder": ["../../libs/types/imagebuilder"],
     },
   },
   "include": ["**/*.ts", "**/*.tsx", "**/*.jsx", "**/*.js", "**/*.json"],

apps/standalone/scripts/setup_env.sh

@@ -63,6 +63,7 @@ echo "Using external IP: $EXTERNAL_IP" >&2
 export FLIGHTCTL_SERVER_INSECURE_SKIP_VERIFY='true'
 export FLIGHTCTL_SERVER="https://$EXTERNAL_IP:3443"
 export FLIGHTCTL_SERVER_EXTERNAL="https://api.$EXTERNAL_IP.nip.io:3443"
+export FLIGHTCTL_IMAGEBUILDER_SERVER="https://$EXTERNAL_IP:8445"
 
 # CLI artifacts - get setting from kind cluster, unless it has been configured already
 if [ -z "$ENABLE_CLI_ARTIFACTS" ]; then
@@ -91,6 +92,7 @@ echo "🌐 Environment variables set:" >&2
 echo "  FLIGHTCTL_SERVER_INSECURE_SKIP_VERIFY=$FLIGHTCTL_SERVER_INSECURE_SKIP_VERIFY" >&2
 echo "  FLIGHTCTL_SERVER=$FLIGHTCTL_SERVER" >&2
 echo "  FLIGHTCTL_SERVER_EXTERNAL=$FLIGHTCTL_SERVER_EXTERNAL" >&2
+echo "  FLIGHTCTL_IMAGEBUILDER_SERVER=$FLIGHTCTL_IMAGEBUILDER_SERVER" >&2
 echo "  FLIGHTCTL_CLI_ARTIFACTS_SERVER=${FLIGHTCTL_CLI_ARTIFACTS_SERVER:-'(disabled)'}" >&2
 echo "  FLIGHTCTL_ALERTMANAGER_PROXY=${FLIGHTCTL_ALERTMANAGER_PROXY:-'(disabled)'}" >&2
 echo >&2

apps/standalone/src/app/routes.tsx

@@ -76,6 +76,13 @@ const CreateAuthProvider = React.lazy(
 const AuthProviderDetails = React.lazy(
   () => import('@flightctl/ui-components/src/components/AuthProvider/AuthProviderDetails/AuthProviderDetails'),
 );
+const ImageBuildsPage = React.lazy(() => import('@flightctl/ui-components/src/components/ImageBuilds/ImageBuildsPage'));
+const ImageBuildDetails = React.lazy(
+  () => import('@flightctl/ui-components/src/components/ImageBuilds/ImageBuildDetails/ImageBuildDetailsPage'),
+);
+const CreateImageBuildWizard = React.lazy(
+  () => import('@flightctl/ui-components/src/components/ImageBuilds/CreateImageBuildWizard/CreateImageBuildWizard'),
+);
 
 export type ExtendedRouteObject = RouteObject & {
   title?: string;
@@ -259,6 +266,49 @@ const getAppRoutes = (t: TFunction): ExtendedRouteObject[] => [
       },
     ],
   },
+  {
+    path: '/devicemanagement/imagebuilds',
+    showInNav: true,
+    title: t('Image builds'),
+    children: [
+      {
+        index: true,
+        title: t('Image builds'),
+        element: (
+          <TitledRoute title={t('Image builds')}>
+            <ImageBuildsPage />
+          </TitledRoute>
+        ),
+      },
+      {
+        path: 'create',
+        title: t('Build new image'),
+        element: (
+          <TitledRoute title={t('Build new image')}>
+            <CreateImageBuildWizard />
+          </TitledRoute>
+        ),
+      },
+      {
+        path: 'edit/:imageBuildId',
+        title: t('Duplicate image build'),
+        element: (
+          <TitledRoute title={t('Duplicate image build')}>
+            <CreateImageBuildWizard />
+          </TitledRoute>
+        ),
+      },
+      {
+        path: ':imageBuildId/*',
+        title: t('Image build'),
+        element: (
+          <TitledRoute title={t('Image build')}>
+            <ImageBuildDetails />
+          </TitledRoute>
+        ),
+      },
+    ],
+  },
   {
     path: '/devicemanagement/repositories',
     showInNav: true,

apps/standalone/src/app/utils/apiCalls.ts

@@ -14,6 +14,8 @@ const apiServer = `${window.location.hostname}${apiPort ? `:${apiPort}` : ''}`;
 const flightCtlAPI = `${window.location.protocol}//${apiServer}/api/flightctl`;
 const uiProxyAPI = `${window.location.protocol}//${apiServer}/api`;
 
+const imageBuilderPathRegex = /^image(builds|exports)/;
+
 export const loginAPI = `${window.location.protocol}//${apiServer}/api/login`;
 export const wsEndpoint = `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${apiServer}`;
 
@@ -46,6 +48,9 @@ const getFullApiUrl = (path: 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}` };
+  }
   return { api: 'flightctl', url: `${flightCtlAPI}/api/v1/${path}` };
 };
 

apps/standalone/tsconfig.json

@@ -24,6 +24,7 @@
       "@fctl-assets/*": ["src/assets/*"],
       "@flightctl/ui-components/*": ["../../libs/ui-components/*"],
       "@flightctl/types": ["../../libs/types"],
+      "@flightctl/types/imagebuilder": ["../../libs/types/imagebuilder"],
     },
   },
   "include": ["**/*.ts", "**/*.tsx", "**/*.jsx", "**/*.js", "**/*.json"],

libs/ansible/src/const.ts

@@ -17,6 +17,10 @@ export const appRoutes = {
   [ROUTE.RESOURCE_SYNC_DETAILS]: '/edge/resourcesyncs',
   [ROUTE.ENROLLMENT_REQUESTS]: '/edge/enrollmentrequests',
   [ROUTE.ENROLLMENT_REQUEST_DETAILS]: '/edge/enrollmentrequests',
+  [ROUTE.IMAGE_BUILDS]: '/edge/imagebuilds',
+  [ROUTE.IMAGE_BUILD_CREATE]: '/edge/imagebuilds/create',
+  [ROUTE.IMAGE_BUILD_DETAILS]: '/edge/imagebuilds',
+  [ROUTE.IMAGE_BUILD_EDIT]: '/edge/imagebuilds/edit',
   // Unimplemented UI routes
   [ROUTE.COMMAND_LINE_TOOLS]: '/',
   [ROUTE.AUTH_PROVIDERS]: '/',

libs/cypress/support/interceptors/auth.ts

@@ -5,7 +5,6 @@ import { createListMatcher } from './matchers';
 const loadInterceptors = () => {
   cy.intercept('GET', '/api/login/info', (req) => {
     req.reply({
-      // CELIA-WIP MOST LIKELY WE NEED TO ADD MORE MOCKS FOR CYPRESS TESTS TO CONTINUE WORKING
       statusCode: 200,
       body: {
         username: 'cypress-user',