store/cockpit: long running ibcli as a cockpit systemd service

Use cockpit's `long-running-process` to launch a `one-shot` systemd
service that runs the image-build with the image-builder cli. This is a
step towards removing our dependency on `osbuild-composer`.

Results are saved to a file and are updated with the lifecycle events
from the systemd service.

Author: kingsleyzissou

cockpit/cockpit-image-builder.spec

@@ -19,6 +19,7 @@ BuildRequires:  nodejs
 Requires:       cockpit
 Requires:       cockpit-files
 Requires:       osbuild-composer >= 131
+Requires:       image-builder >= 33
 
 %description
 The image-builder-frontend generates custom images suitable for

fec.config.js

@@ -68,6 +68,7 @@ module.exports = {
       // to false
       cockpit: false,
       'cockpit/fsinfo': false,
+      'long-running-process': false,
       'os-release': false,
     },
   },

playwright/test.spec.ts

@@ -1,4 +1,6 @@
-import { readFileSync } from 'node:fs';
+import { readFileSync, writeFileSync } from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
 
 import TOML from '@ltd/j-toml';
 import { expect, test } from '@playwright/test';
@@ -8,6 +10,12 @@ import { closePopupsIfExist, isHosted } from './helpers/helpers';
 import { ensureAuthenticated } from './helpers/login';
 import { ibFrame, navigateToLandingPage } from './helpers/navHelpers';
 
+const awsCredentials = `
+[default]
+aws_access_key_id = supersecret
+aws_secret_access_key = secretsquirrel
+`;
+
 test.describe.serial('test', () => {
   const blueprintName = uuidv4();
   test('create blueprint', async ({ page }) => {
@@ -266,6 +274,13 @@ test.describe.serial('test', () => {
       return;
     }
 
+    // this needs to be set so ibcli will list aws targets
+    // as an available image type
+    writeFileSync(
+      path.join(os.homedir(), '.aws', 'credentials'),
+      awsCredentials,
+    );
+
     await ensureAuthenticated(page);
     await closePopupsIfExist(page);
     // Navigate to IB landing page and get the frame

schutzbot/Containerfile-Playwright

@@ -0,0 +1,14 @@
+FROM ubuntu:latest AS builder
+RUN apt update
+RUN apt install -y git golang libgpgme-dev libbtrfs-dev libdevmapper-dev podman
+RUN git clone https://github.com/osbuild/image-builder-cli.git ibcli
+WORKDIR ibcli
+RUN ls -al
+RUN go mod tidy && go mod vendor
+RUN go build -o /opt ./cmd/image-builder/
+
+FROM mcr.microsoft.com/playwright:v1.51.1-noble
+RUN apt update
+# Needed for running image-builder
+RUN apt install -y libgpgme-dev libbtrfs-dev libdevmapper-dev
+COPY --from=builder /opt /usr/bin

schutzbot/playwright_tests.sh

@@ -21,6 +21,8 @@ sudo useradd admin -p "$(openssl passwd foobar)"
 sudo usermod -aG wheel admin
 echo "admin ALL=(ALL:ALL) NOPASSWD: ALL" | sudo tee "/etc/sudoers.d/admin-nopasswd"
 
+sudo podman build --tag playwright -f $(pwd)/schutzbot/Containerfile-Playwright .
+
 function upload_artifacts {
     if [ -n "${TMT_TEST_DATA:-}" ]; then
         mv playwright-report "$TMT_TEST_DATA"/playwright-report
@@ -88,5 +90,5 @@ sudo podman run \
      --privileged  \
      --rm \
      --init \
-     mcr.microsoft.com/playwright:v1.51.1-noble \
+     localhost/playwright \
      /bin/sh -c "cd tests && npx -y [email protected] test --workers=${PW_WORKERS}"

src/AppCockpit.tsx

@@ -1,28 +1,35 @@
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/patternfly/patternfly-addons.css';
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import 'cockpit-dark-theme';
 import { Page, PageSection } from '@patternfly/react-core';
+import { Spinner } from '@redhat-cloud-services/frontend-components';
 import NotificationsProvider from '@redhat-cloud-services/frontend-components-notifications/NotificationsProvider';
+import cockpit from 'cockpit';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { HashRouter } from 'react-router-dom';
 
 import './AppCockpit.scss';
-import { NotReady, RequireAdmin } from './Components/Cockpit';
+import { RequireAdmin } from './Components/Cockpit';
 import { Router } from './Router';
 import { onPremStore as store } from './store';
-import { useGetComposerSocketStatus } from './Utilities/useComposerStatus';
 import { useIsCockpitAdmin } from './Utilities/useIsCockpitAdmin';
 
 const Application = () => {
-  const { enabled, started } = useGetComposerSocketStatus();
   const isAdmin = useIsCockpitAdmin();
+  const [ready, setReady] = useState(false);
 
-  if (!started || !enabled) {
-    return <NotReady enabled={enabled} />;
+  useEffect(() => {
+    if (cockpit) {
+      setReady(true);
+    }
+  }, [cockpit, ready, setReady]);
+
+  if (!ready) {
+    return <Spinner centered />;
   }
 
   if (!isAdmin) {

src/constants.ts

@@ -59,6 +59,7 @@ export const CENTOS_9 = 'centos-9';
 export const CENTOS_10 = 'centos-10';
 export const FEDORA_41 = 'fedora-41';
 export const FEDORA_42 = 'fedora-42';
+export const FEDORA_43 = 'fedora-43';
 export const X86_64 = 'x86_64';
 export const AARCH64 = 'aarch64';
 
@@ -97,6 +98,7 @@ export const ON_PREM_RELEASES = new Map([
   [CENTOS_10, 'CentOS Stream 10'],
   [FEDORA_41, 'Fedora Linux 41'],
   [FEDORA_42, 'Fedora Linux 42'],
+  [FEDORA_43, 'Fedora Linux 43'],
   [RHEL_10, 'Red Hat Enterprise Linux (RHEL) 10'],
 ]);
 
@@ -310,3 +312,4 @@ export const PAGINATION_COUNT = 0;
 export const SEARCH_INPUT = '';
 
 export const BLUEPRINTS_DIR = '.cache/cockpit-image-builder/';
+export const ARTIFACTS_DIR = '/var/lib/osbuild-composer/artifacts';

src/store/cockpit/cockpitApi.ts

@@ -9,6 +9,7 @@ import path from 'path';
 import TOML, { Section } from '@ltd/j-toml';
 import cockpit from 'cockpit';
 import { fsinfo } from 'cockpit/fsinfo';
+import { LongRunningProcess } from 'long-running-process';
 import { v4 as uuidv4 } from 'uuid';
 
 // We have to work around RTK query here, since it doesn't like splitting
@@ -19,17 +20,21 @@ import { v4 as uuidv4 } from 'uuid';
 // bit so that the `cockpitApi` doesn't become a monolith.
 import { contentSourcesApi } from './contentSourcesApi';
 import {
+  ComposeStatus,
+  composeStatus,
   datastreamDistroLookup,
   getBlueprintsPath,
   getCloudConfigs,
-  mapToOnpremRequest,
   paginate,
   readComposes,
+  updateComposeStatus,
 } from './helpers';
 import type {
   CockpitCreateBlueprintApiArg,
   CockpitCreateBlueprintRequest,
   CockpitUpdateBlueprintApiArg,
+  GetCockpitComposeStatusApiResponse,
+  ImageStatus,
   UpdateWorkerConfigApiArg,
   WorkerConfigFile,
   WorkerConfigResponse,
@@ -39,6 +44,7 @@ import {
   mapHostedToOnPrem,
   mapOnPremToHosted,
 } from '../../Components/Blueprints/helpers/onPremToHostedBlueprintMapper';
+import { ARTIFACTS_DIR } from '../../constants';
 import {
   BlueprintItem,
   ComposeBlueprintApiArg,
@@ -61,7 +67,6 @@ import {
   GetComposesApiArg,
   GetComposesApiResponse,
   GetComposeStatusApiArg,
-  GetComposeStatusApiResponse,
   GetOscapCustomizationsApiArg,
   GetOscapCustomizationsApiResponse,
   GetOscapProfilesApiArg,
@@ -359,7 +364,7 @@ export const cockpitApi = contentSourcesApi.injectEndpoints({
         ComposeBlueprintApiResponse,
         ComposeBlueprintApiArg
       >({
-        queryFn: async ({ id: filename }, _, __, baseQuery) => {
+        queryFn: async ({ id: filename }) => {
           try {
             const blueprintsDir = await getBlueprintsPath();
             const file = cockpit.file(
@@ -386,29 +391,63 @@ export const cockpitApi = contentSourcesApi.injectEndpoints({
                 image_requests: [ir],
               };
 
-              const composeResp = await baseQuery({
-                url: '/compose',
-                method: 'POST',
-                body: JSON.stringify(
-                  // since this is the request that gets sent to the cloudapi
-                  // backend, we need to modify it slightly
-                  mapToOnpremRequest(
+              const uuid = uuidv4();
+              const composeDir = path.join(blueprintsDir, filename, uuid);
+              await cockpit.spawn(['mkdir', '-p', composeDir], {});
+
+              const ibBpPath = path.join(composeDir, 'bp.json');
+              await cockpit
+                .file(ibBpPath)
+                .replace(
+                  JSON.stringify(
                     mapHostedToOnPrem(blueprint as CreateBlueprintRequest),
-                    crcComposeRequest.distribution,
-                    [ir],
+                    null,
+                    2,
                   ),
-                  null,
-                  2,
-                ),
-                headers: {
-                  'content-type': 'application/json',
-                },
-              });
+                );
 
+              // save the blueprint request early, since any errors
+              // in this function cause pretty big headaches with
+              // the images table
               await cockpit
-                .file(path.join(blueprintsDir, filename, composeResp.data?.id))
+                .file(path.join(composeDir, 'request.json'))
                 .replace(JSON.stringify(crcComposeRequest, null, 2));
-              composes.push({ id: composeResp.data?.id });
+
+              const user = await cockpit.user();
+              const cmd = [
+                // the image build fails if we don't set
+                // this for some reason
+                `HOME=${user.home}`,
+                '/usr/bin/image-builder',
+                'build',
+                '--with-buildlog',
+                '--blueprint',
+                ibBpPath,
+                '--output-dir',
+                path.join(ARTIFACTS_DIR, uuid),
+                '--output-name',
+                uuid,
+                '--distro',
+                crcComposeRequest.distribution,
+                ir.image_type,
+              ];
+
+              const process = new LongRunningProcess(
+                `cockpit-image-builder-${uuid}.service`,
+                updateComposeStatus(composeDir),
+              );
+
+              // this is a workaround because the process
+              // can't be started when in `init` state
+              process.state = 'stopped';
+
+              process.run(['bash', '-ec', cmd.join(' ')]).catch(async () => {
+                await cockpit
+                  .file(path.join(composeDir, 'result'))
+                  .replace(ComposeStatus.FAILURE);
+              });
+
+              composes.push({ id: uuid });
             }
 
             return {
@@ -452,37 +491,47 @@ export const cockpitApi = contentSourcesApi.injectEndpoints({
         },
       }),
       getComposeStatus: builder.query<
-        GetComposeStatusApiResponse,
+        GetCockpitComposeStatusApiResponse,
         GetComposeStatusApiArg
       >({
-        queryFn: async (queryArg, _, __, baseQuery) => {
+        queryFn: async (queryArg) => {
           try {
-            const resp = await baseQuery({
-              url: `/composes/${queryArg.composeId}`,
-              method: 'GET',
-            });
             const blueprintsDir = await getBlueprintsPath();
             const info = await fsinfo(blueprintsDir, ['entries'], {
               superuser: 'try',
             });
             const entries = Object.entries(info?.entries || {});
-            for (const bpEntry of entries) {
+            for await (const bpEntry of entries) {
+              const bpComposes = await readComposes(bpEntry[0]);
+              if (!bpComposes.some((c) => c.id === queryArg.composeId)) {
+                continue;
+              }
+
               const request = await cockpit
-                .file(path.join(blueprintsDir, bpEntry[0], queryArg.composeId))
+                .file(
+                  path.join(
+                    blueprintsDir,
+                    bpEntry[0],
+                    queryArg.composeId,
+                    'request.json',
+                  ),
+                )
                 .read();
+
+              const status = await composeStatus(
+                queryArg.composeId,
+                path.join(blueprintsDir, bpEntry[0], queryArg.composeId),
+              );
+
               return {
                 data: {
-                  image_status: resp.data?.image_status,
+                  image_status: status as ImageStatus,
                   request: JSON.parse(request),
                 },
               };
             }
-            return {
-              data: {
-                image_status: '',
-                request: {},
-              },
-            };
+
+            throw new Error('Compose not found');
           } catch (error) {
             return { error };
           }