Makefile: Implement support for fully sourced container stack HMS-3883

.gitignore

@@ -24,3 +24,4 @@ coverage
 
 *~
 bots
+container_built.info

Makefile

@@ -0,0 +1,44 @@
+
+.PHONY: help
+help:
+	@echo "make [TARGETS...]"
+	@echo
+	@echo "This is the maintenance makefile of osbuild-composer. The following"
+	@echo "targets are available:"
+	@echo
+	@echo "    help:               Print this usage information."
+	@echo "    container:          Build a container to run the frontend."
+	@echo "                        Implicitly used by https://github.com/osbuild/osbuild-getting-started/"
+
+# either "docker" or "sudo podman"
+# podman needs to build as root as it also needs to run as root afterwards
+CONTAINER_EXECUTABLE ?= docker
+
+DOCKER_IMAGE := image-builder-frontend_dev
+DOCKERFILE := distribution/Dockerfile.dev
+
+# All files to check for rebuild!
+SRC_DEPS := $(shell find . -not -path './node_modules/*' \
+                           -not -path './dist/*' \
+                           -not -path './coverage/*' \
+                           \( -name "*.ts" \
+                           -or -name "*.tsx" \
+                           -or -name "*.yml" \
+                           -or -name "*.yaml" \
+                           -or -name "*.json" \
+                           -or -name "*.js" \) )
+
+clean:
+	rm -f container_built.info
+
+container_built.info: $(DOCKERFILE) $(SRC_DEPS)
+	$(CONTAINER_EXECUTABLE) build -t $(DOCKER_IMAGE) -f $(DOCKERFILE) . --build-arg BUILD_DATE=$(shell date +%Y%m%d_%H%M%S)
+	echo "Container last built on" > $@
+	date >> $@
+
+.PHONY: build
+build:
+	npm run build
+
+.PHONY: container.dev
+container.dev: container_built.info

distribution/Dockerfile

@@ -1,12 +1,22 @@
-FROM node:18
+FROM node:20
 
 WORKDIR /app
 
+ARG BACKEND_HOSTNAME=localhost
+ENV BACKEND_HOSTNAME=$BACKEND_HOSTNAME
+
+ARG BACKEND_PORT=8086
+ENV BACKEND_PORT=$BACKEND_PORT
+
 COPY . .
 
+# Helper to re-run npm ci
+ARG BUILD_DATE=NOT_SET
+ENV BUILD_DATE=$BUILD_DATE
+
 RUN npm ci
 
 EXPOSE 8002
 EXPOSE 1337
 
-CMD [ "npm", "run", "devel" ]
+CMD [ "npm", "run", "start" ]

distribution/Dockerfile.dev

@@ -0,0 +1,30 @@
+FROM node:20
+
+USER root
+# frontend-components need a container system
+# this is the reason why we run in docker -> to start podman then
+RUN apt update && apt install -y podman
+
+WORKDIR /app
+
+ARG BACKEND_HOSTNAME=localhost
+ENV BACKEND_HOSTNAME=$BACKEND_HOSTNAME
+
+ARG BACKEND_PORT=8086
+ENV BACKEND_PORT=$BACKEND_PORT
+
+COPY . .
+
+RUN chmod a+x /app/distribution/*.sh
+RUN /app/distribution/create_storage_conf.sh
+
+# Helper to re-run npm ci
+ARG BUILD_DATE=NOT_SET
+ENV BUILD_DATE=$BUILD_DATE
+
+RUN npm ci
+
+EXPOSE 8002
+EXPOSE 1337
+
+CMD [ "npm", "run", "start:local" ]

distribution/create_storage_conf.sh

@@ -0,0 +1,10 @@
+#!/usr/bin/env bash
+
+mkdir -p /etc/containers
+
+tee -a /etc/containers/storage.conf <<EOF
+[storage]
+driver = "vfs"
+runroot = "/run/containers/storage"
+graphroot = "/var/lib/containers/storage"
+EOF

fec.config.js

@@ -50,10 +50,42 @@ if (process.env.MSW) {
   add_define('process.env.MSW', process.env.MSW);
 }
 
+if (process.env.IMAGE_BUILDER_API_BASEURL) {
+  add_define(
+    'process.env.IMAGE_BUILDER_API_BASEURL',
+    process.env.IMAGE_BUILDER_API_BASEURL
+  );
+}
+
 if (process.env.NODE_ENV) {
   add_define('process.env.NODE_ENV', process.env.NODE_ENV);
 }
 
+if (process.env.FAKE_AUTH) {
+  add_define('process.env.FAKE_AUTH', process.env.FAKE_AUTH);
+}
+
+const devServerConfig = {};
+let customProxy = [];
+
+if (process.env.IMAGE_BUILDER_API_BASEURL) {
+  customProxy = [
+    ...customProxy,
+    {
+      context: ['/api/image-builder/v1'],
+      target: process.env.IMAGE_BUILDER_API_BASEURL,
+      secure: false,
+    },
+  ];
+}
+
+if (process.env.MSW) {
+  devServerConfig.headers = {
+    ...devServerConfig.headers,
+    'Service-Worker-Allowed': '/',
+  };
+}
+
 module.exports = {
   sassPrefix: '.imageBuilder',
   debug: true,
@@ -69,9 +101,7 @@ module.exports = {
   code will need to be modified if using MSW in prod-beta or prod-stable so that
   those headers are not overwritten.
   */
-  devServer: process.env.MSW && {
-    headers: { 'Service-Worker-Allowed': '/' },
-  },
+  devServer: { ...devServerConfig },
   appUrl: '/insights/image-builder',
   useProxy: true,
   useAgent: true,
@@ -106,4 +136,5 @@ module.exports = {
     shared: [{ 'react-router-dom': { singleton: true, version: '*' } }],
     exclude: ['react-router-dom'],
   },
+  customProxy: customProxy,
 };

package.json

@@ -77,6 +77,7 @@
     "uuid": "10.0.0",
     "vitest": "2.0.5",
     "vitest-canvas-mock": "0.3.3",
+    "webpack": "^5.93.0",
     "webpack-bundle-analyzer": "4.10.2",
     "whatwg-fetch": "3.6.20"
   },
@@ -87,7 +88,10 @@
     "start": "fec dev",
     "start:stage": "fec dev --clouddotEnv=stage",
     "start:prod": "fec dev --clouddotEnv=prod",
+    "start:msw": "NODE_ENV=development MSW=TRUE fec dev",
     "start:msw:stage": "NODE_ENV=development MSW=TRUE fec dev --clouddotEnv=stage",
+    "start:msw:prod": "NODE_ENV=development MSW=TRUE fec dev --clouddotEnv=prod",
+    "start:local": "FAKE_AUTH=TRUE IMAGE_BUILDER_API_BASEURL=http://localhost:8086 fec dev --clouddotEnv=stage",
     "test": "TZ=UTC vitest run",
     "test:watch": "TZ=UTC vitest",
     "test:coverage": "TZ=UTC vitest run --coverage",

src/AppEntry.tsx

@@ -9,7 +9,7 @@ if (
   process.env.NODE_ENV === 'development' &&
   process.env.MSW?.toString().toLowerCase() === 'true'
 ) {
-  // process.env.MSW is set in the webpack config using DefinePlugin
+  // process.env.MSW is set in the fec.config.js using DefinePlugin
   // eslint-disable-next-line @typescript-eslint/no-require-imports
   const { worker } = require('./test/mocks/browser');
   worker.start({

src/store/emptyImageBuilderApi.ts

@@ -6,10 +6,58 @@ import { IMAGE_BUILDER_API } from '../constants';
 export const emptyImageBuilderApi = createApi({
   reducerPath: 'imageBuilderApi',
   baseQuery: fetchBaseQuery({
-    baseUrl: window.location.origin + IMAGE_BUILDER_API,
+    baseUrl: IMAGE_BUILDER_API.startsWith('http')
+      ? IMAGE_BUILDER_API
+      : window.location.origin + IMAGE_BUILDER_API,
     prepareHeaders: (headers) => {
       // help the backend distinguish between requests from the UI and the API
       headers.set('X-ImageBuilder-ui', 'true');
+      if (process.env.FAKE_AUTH) {
+        const fakeFullEntitlement = `{
+    "entitlements": {
+		"insights": {
+			"is_entitled": true
+		},
+		"rhel": {
+			"is_entitled": true
+		},
+		"smart_management": {
+			"is_entitled": true
+		},
+		"openshift": {
+			"is_entitled": true
+		},
+		"hybrid": {
+			"is_entitled": true
+		},
+		"migrations": {
+			"is_entitled": true
+		},
+		"ansible": {
+			"is_entitled": true
+		}
+    },
+    "identity": {
+		"type": "User",
+		"user": {
+            "username": "user",
+            "email": "[email protected]",
+            "first_name": "user",
+            "last_name": "user",
+            "is_active": true,
+            "is_org_admin": true,
+            "is_internal": true,
+            "locale": "en-US"
+		},
+		"internal": {"org_id": "000000"},
+		"account_number": "000000"
+    }
+}`;
+        headers.set(
+          'X-Rh-Identity',
+          Buffer.from(fakeFullEntitlement).toString('base64')
+        );
+      }
     },
     paramsSerializer: (params) => {
       /*