particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

cockpit: add webpack config and support for Cockpit

Browse source 
Configured Webpack and setup of cockpit to support
building and running image builder as a cockpit plugin
(On-premise)
This commit is contained in:
Michal Gold 2024-10-15 10:55:46 +03:00 • committed by Lucas Garfield
parent 1ab31abc4a
commit 82f3f38e56
6 changed files with 2023 additions and 124 deletions
Download patch file Download diff file Expand all files Collapse all files

15
cockpit/public/index.html Normal file
View file

@ -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</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>

15
cockpit/public/manifest.json Normal file
View file

@ -0,0 +1,15 @@
{
"dashboard": {
"index": {
"label": "Image Builder",
"icon": "pficon-build",
"docs": [
{
"label": "Creating system images",
"url": "https://osbuild.org/"
}
]
}
},
"content-security-policy": "default-src 'self' 'unsafe-eval'"
}

68
cockpit/webpack.config.ts Normal file
View file

@ -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({
ignoreOrder: true,
}),
new webpack.DefinePlugin({
'process.env.IS_ON_PREMISE': JSON.stringify(true),
}),
];
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: /\.(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'],
},
],
},
};

2005
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

6
package.json
View file

@ -27,6 +27,10 @@
"redux-promise-middleware": "6.2.0"
},
"devDependencies": {
"@babel/core": "7.25.8",
"@babel/preset-env": "7.25.8",
"@babel/preset-react": "7.25.7",
"@babel/preset-typescript": "7.25.7",
"@patternfly/react-icons": "5.4.0",
"@redhat-cloud-services/eslint-config-redhat-cloud-services": "2.0.4",
"@redhat-cloud-services/frontend-components-config": "6.3.1",
@ -44,6 +48,7 @@
"@typescript-eslint/parser": "8.8.1",
"@vitejs/plugin-react": "4.3.2",
"@vitest/coverage-v8": "2.0.5",
"babel-loader": "9.2.1",
"chart.js": "4.4.4",
"chartjs-adapter-moment": "1.0.1",
"chartjs-plugin-annotation": "3.1.0",
@ -62,6 +67,7 @@
"identity-obj-proxy": "3.0.0",
"jsdom": "25.0.1",
"madge": "8.0.0",
"mini-css-extract-plugin": "2.9.1",
"moment": "2.30.1",
"msw": "2.4.9",
"npm-run-all": "4.1.5",

38
src/AppCockpit.tsx Normal file
View file

@ -0,0 +1,38 @@
import '@patternfly/react-core/dist/styles/base.css';
import '@patternfly/patternfly/patternfly-addons.css';
import React from 'react';
import NotificationsPortal from '@redhat-cloud-services/frontend-components-notifications/NotificationPortal';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { Router } from './Router';
import { store } from './store';
const Application = () => {
return (
<React.Fragment>
<NotificationsPortal />
<BrowserRouter>
<Router />
</BrowserRouter>
</React.Fragment>
);
};
const ImageBuilder = () => (
<Provider store={store}>
<Application />
</Provider>
);
const main = async () => {
const root = document.getElementById('main');
if (root) {
const reactRoot = createRoot(root);
reactRoot.render(<ImageBuilder />);
}
};
main();