Skip to content

Commit 627be64

Browse files
dlabrecqdlabrecq
authored
Merge pull request #4548 from rawagner/koku-onprem
Add Koku UI OnPrem skeleton app
2 parents 4d66f2c + 9066b89 commit 627be64

File tree

9 files changed

+1484
-19
lines changed

9 files changed

+1484
-19
lines changed

‎apps/koku-ui-onprem/README.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Koku UI OnPrem
2+
3+
[![Apache 2.0][license-badge]](https://github.com/project-koku/koku-ui/blob/main/LICENSE)
4+
5+
React.js app for Cost Management OnPrem.
6+
7+
User interface is based on [Patternfly].
8+
9+
Submit issues in [Jira].
10+
11+
[Jira]: https://issues.redhat.com/projects/COST/
12+
[Patternfly]: https://www.patternfly.org/

‎apps/koku-ui-onprem/package.json‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
{
2+
"name": "@koku-ui/koku-ui-onprem",
3+
"version": "0.0.1",
4+
"description": "User Interface for Cost Management OnPrem",
5+
"main": "index.js",
6+
"repository": "https://github.com/project-koku/koku-ui.git",
7+
"author": "Red Hat",
8+
"license": "GNU AGPLv3",
9+
"private": true,
10+
"scripts": {
11+
"build": "NODE_ENV=production npm run ts-node ../../node_modules/.bin/webpack --mode=production",
12+
"start": "npm run ts-node ../../node_modules/.bin/webpack serve --mode=development --color --progress",
13+
"lint": "npm-run-all lint:*",
14+
"lint:ts": "eslint src",
15+
"lint:ts:fix": "eslint src --fix",
16+
"test": "",
17+
"ts-node": "ts-node -O '{\"module\":\"commonjs\"}'"
18+
},
19+
"dependencies": {
20+
"@patternfly/patternfly": "6.4.0",
21+
"@patternfly/react-charts": "8.4.0",
22+
"@patternfly/react-component-groups": "6.4.0",
23+
"@patternfly/react-core": "6.4.0",
24+
"@patternfly/react-icons": "6.4.0",
25+
"@patternfly/react-table": "6.4.0",
26+
"@patternfly/react-tokens": "6.4.0",
27+
"react": "^18.3.1",
28+
"react-dom": "^18.3.1",
29+
"react-intl": "^7.1.14",
30+
"react-redux": "^9.2.0",
31+
"react-router-dom": "^6.30.1",
32+
"redux": "^5.0.1",
33+
"redux-thunk": "^3.1.0",
34+
"typesafe-actions": "^5.1.0"
35+
},
36+
"devDependencies": {
37+
"@formatjs/cli": "^6.7.4",
38+
"@formatjs/ecma402-abstract": "^2.3.6",
39+
"@formatjs/fast-memoize": "^2.2.7",
40+
"@formatjs/icu-messageformat-parser": "^2.11.4",
41+
"@formatjs/intl": "^3.1.8",
42+
"@formatjs/intl-localematcher": "^0.6.2",
43+
"@redhat-cloud-services/frontend-components-config": "^6.7.4",
44+
"@redhat-cloud-services/tsc-transform-imports": "^1.0.26",
45+
"@testing-library/jest-dom": "^6.9.1",
46+
"@testing-library/react": "^16.3.0",
47+
"@testing-library/user-event": "^14.6.1",
48+
"@types/jest": "^30.0.0",
49+
"@types/qs": "^6.14.0",
50+
"@types/react": "^18.3.26",
51+
"@types/react-dom": "^18.3.7",
52+
"@types/react-redux": "^7.1.34",
53+
"copy-webpack-plugin": "^13.0.1",
54+
"css-minimizer-webpack-plugin": "^5.0.1",
55+
"globals": "^16.5.0",
56+
"identity-obj-proxy": "^3.0.0",
57+
"rimraf": "^6.1.0",
58+
"ts-loader": "^9.4.4",
59+
"ts-node": "^10.9.2",
60+
"ts-patch": "^3.3.0",
61+
"typescript": "^5.9.3",
62+
"webpack": "5.102.1",
63+
"webpack-dev-server": "5.1.0"
64+
}
65+
}

‎apps/koku-ui-onprem/src/components/app/App.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
3+
const App = () => {
4+
return <div>Cost Management OnPrem</div>;
5+
};
6+
7+
export default App;

‎apps/koku-ui-onprem/src/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Cost Management</title>
7+
<meta id="appName" name="application-name" content="Cost Management">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<base href="/">
10+
</head>
11+
12+
<body>
13+
<noscript>Enabling JavaScript is required to run this app.</noscript>
14+
<div id="root"></div>
15+
</body>
16+
17+
</html>

‎apps/koku-ui-onprem/src/index.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
import { createRoot } from 'react-dom/client';
3+
4+
import App from './components/app/App';
5+
6+
const rootElement = document.getElementById('root');
7+
8+
const root = createRoot(rootElement);
9+
root.render(
10+
<React.StrictMode>
11+
<App />
12+
</React.StrictMode>
13+
);

‎apps/koku-ui-onprem/tsconfig.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"extends": "../../tsconfig.json",
3+
"compilerOptions": {
4+
"baseUrl": "./src",
5+
"outDir": "./dist/",
6+
},
7+
"include": [
8+
"./src/**/*.ts*",
9+
],
10+
"exclude": [
11+
"./src/**/*.test.ts*",
12+
]
13+
}

‎apps/koku-ui-onprem/webpack.config.ts‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
2+
import HtmlWebpackPlugin from 'html-webpack-plugin';
3+
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
4+
import path from 'path';
5+
import TerserJSPlugin from 'terser-webpack-plugin';
6+
import type { Configuration } from 'webpack';
7+
import type { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
8+
9+
const NODE_ENV = (process.env.NODE_ENV || 'development') as Configuration['mode'];
10+
11+
const config: Configuration & {
12+
devServer?: WebpackDevServerConfiguration;
13+
} = {
14+
mode: NODE_ENV,
15+
devtool: 'eval-source-map',
16+
devServer: {
17+
host: 'localhost',
18+
port: 9000,
19+
historyApiFallback: true,
20+
open: true,
21+
static: {
22+
directory: path.resolve(__dirname, 'dist'),
23+
},
24+
client: {
25+
overlay: true,
26+
},
27+
devMiddleware: {
28+
writeToDisk: true,
29+
index: 'index.html',
30+
},
31+
},
32+
module: {
33+
rules: [
34+
{
35+
test: /\.(jsx?|tsx?)$/,
36+
exclude: /node_modules\/(?!@koku-ui)/,
37+
use: [
38+
{
39+
loader: 'ts-loader',
40+
options: {
41+
allowTsInNodeModules: true,
42+
},
43+
},
44+
],
45+
},
46+
{
47+
test: /\.css$/,
48+
use: ['style-loader', 'css-loader'],
49+
},
50+
{
51+
test: /\.(svg|ttf|eot|woff|woff2)$/,
52+
type: 'asset/resource',
53+
// only process modules with this loader
54+
// if they live under a 'fonts' or 'pficon' directory
55+
include: [
56+
path.resolve(__dirname, 'node_modules/patternfly/dist/fonts'),
57+
path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/fonts'),
58+
path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/pficon'),
59+
path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/fonts'),
60+
path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/pficon'),
61+
],
62+
},
63+
{
64+
test: /\.(jpg|jpeg|png|gif)$/i,
65+
include: [
66+
path.resolve(__dirname, 'src'),
67+
path.resolve(__dirname, 'src/assets/images'),
68+
path.resolve(__dirname, 'node_modules/patternfly'),
69+
path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/images'),
70+
path.resolve(__dirname, 'node_modules/@patternfly/react-styles/css/assets/images'),
71+
path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/images'),
72+
path.resolve(
73+
__dirname,
74+
'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css/assets/images'
75+
),
76+
path.resolve(
77+
__dirname,
78+
'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css/assets/images'
79+
),
80+
path.resolve(
81+
__dirname,
82+
'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css/assets/images'
83+
),
84+
],
85+
},
86+
],
87+
},
88+
output: {
89+
filename: '[name].bundle-[contenthash].js',
90+
path: path.resolve(__dirname, 'dist'),
91+
publicPath: '/',
92+
chunkFilename: '[name].bundle-[contenthash].js',
93+
},
94+
plugins: [
95+
new HtmlWebpackPlugin({
96+
template: path.resolve(__dirname, 'src', 'index.html'),
97+
filename: 'index.html',
98+
}),
99+
],
100+
resolve: {
101+
extensions: ['.js', '.ts', '.tsx', '.jsx'],
102+
symlinks: false,
103+
cacheWithContext: false,
104+
},
105+
watchOptions: {
106+
followSymlinks: true,
107+
},
108+
snapshot: {
109+
managedPaths: [],
110+
},
111+
optimization: {
112+
splitChunks: {
113+
chunks: 'all',
114+
},
115+
},
116+
};
117+
118+
/* Production settings */
119+
if (NODE_ENV === 'production') {
120+
(config.optimization || {}).minimizer = [
121+
new TerserJSPlugin({}),
122+
new CssMinimizerPlugin({
123+
minimizerOptions: {
124+
preset: ['default', { mergeLonghand: false }],
125+
},
126+
}),
127+
];
128+
config.plugins?.push(
129+
new MiniCssExtractPlugin({
130+
filename: '[name]-[contenthash].css',
131+
chunkFilename: '[name].bundle-[contenthash].css',
132+
})
133+
);
134+
config.devtool = 'source-map';
135+
}
136+
137+
export default config;

0 commit comments

Comments
 (0)