Added image-builder-frontend repository as a Cockpit package.

Configured webpack with necessary loaders and plugins for handling JS, TS, CSS, and SCSS files. Ensured compatibility with Cockpit by externalizing cockpit dependencies and updating the webpack configuration. Provided initial setup with image-builder-frontend.
osbuild · Sep 12, 2024 · d020097 · d020097
1 parent d8aab05
commit d020097
Show file tree

Hide file tree

Showing 11 changed files with 2,214 additions and 163 deletions.
diff --git a/cockpit/public/index.html b/cockpit/public/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en-us" class="layout-pf pf-m-redhat-font">
+<head>
+    <meta charset="utf-8">
+    <title>Image-Builder-Frontend</title>
+
+    <!-- js dependencies -->
+    <script type="text/javascript" src="../base1/cockpit.js"></script>
+    <link href="main.css" rel="stylesheet">
+</head>
+<body>
+<div id="main"></div>
+<script defer src="main.js"></script>
+</body>
+</html>
diff --git a/cockpit/public/manifest.json b/cockpit/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "dashboard": {
+    "index": {
+      "label": "Image Builder",
+      "icon": "pficon-build",
+      "docs": [
+        {
+          "label": "Creating system images",
+          "url": "https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/8/html/creating_customized_rhel_images_using_the_image_builder_service"
+        }
+      ]
+    }
+  },
+  "content-security-policy": "default-src 'self' 'unsafe-eval'"
+}
diff --git a/cockpit/webpack.config.js b/cockpit/webpack.config.js
@@ -0,0 +1,68 @@
+const path = require('path');
+
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const webpack = require('webpack'); // Add this line
+
+const [mode, devtool] =
+  process.env.NODE_ENV === 'production'
+    ? ['production', 'source-map']
+    : ['development', 'inline-source-map'];
+
+const output = {
+  path: path.resolve('cockpit/public'),
+  filename: 'main.js',
+  sourceMapFilename: '[file].map',
+};
+
+const plugins = [
+  new MiniCssExtractPlugin(),
+  new webpack.DefinePlugin({
+    'process.env.APP_TYPE_ENV': JSON.stringify(process.env.APP_TYPE_ENV),
+  }),
+];
+
+module.exports = {
+  entry: './src/AppCockpit.tsx',
+  output,
+  mode,
+  devtool,
+  plugins,
+  externals: { cockpit: 'cockpit' },
+  resolve: {
+    modules: ['node_modules'],
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx|ts|tsx)$/,
+        include: [path.resolve('src')],
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              '@babel/preset-env',
+              '@babel/preset-react',
+              '@babel/preset-typescript',
+            ],
+          },
+        },
+        resolve: { fullySpecified: false },
+      },
+      {
+        test: /\.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: { url: false },
+          },
+        ],
+      },
+      {
+        test: /\.scss$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+      },
+    ],
+  },
+};
diff --git a/fec.config.js b/fec.config.js
@@ -54,6 +54,10 @@ if (process.env.NODE_ENV) {
   add_define('process.env.NODE_ENV', process.env.NODE_ENV);
 }
 
+if (process.env.APP_TYPE_ENV) {
+  add_define('process.env.APP_TYPE_ENV', process.env.APP_TYPE_ENV);
+}
+
 module.exports = {
   sassPrefix: '.imageBuilder',
   debug: true,