Skip to content

Commit 136cf78

Browse files
MonPoteMonPote
committed
rework dev environment for shell-ui and metalk8s-ui
1 parent 1949044 commit 136cf78

File tree

8 files changed

+145
-81
lines changed

8 files changed

+145
-81
lines changed

‎biome.json‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"$schema": "https://biomejs.dev/schemas/2.2.7/schema.json",
3+
"vcs": {
4+
"enabled": true,
5+
"clientKind": "git",
6+
"useIgnoreFile": true
7+
},
8+
"files": { "ignoreUnknown": false },
9+
"formatter": {
10+
"enabled": true,
11+
"formatWithErrors": false,
12+
"indentStyle": "space",
13+
"indentWidth": 2,
14+
"lineEnding": "lf",
15+
"lineWidth": 120,
16+
"useEditorconfig": true
17+
},
18+
"linter": {
19+
"enabled": true,
20+
"rules": { "recommended": true },
21+
"domains": {
22+
"next": "recommended",
23+
"react": "recommended"
24+
}
25+
},
26+
"javascript": {
27+
"formatter": {
28+
"jsxQuoteStyle": "double",
29+
"quoteProperties": "asNeeded",
30+
"trailingCommas": "all",
31+
"semicolons": "always",
32+
"arrowParentheses": "always",
33+
"quoteStyle": "single"
34+
}
35+
},
36+
"html": { "formatter": { "selfCloseVoidElements": "always" } },
37+
"assist": {
38+
"enabled": true,
39+
"actions": { "source": { "organizeImports": "on" } }
40+
}
41+
}

‎shell-ui/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,7 @@ node_modules
22
build
33
@mf-types
44
build_ts/
5+
6+
dev.proxy.json
7+
public/dev.deployed-ui-apps.json
8+
public/dev.config.json

shell-ui/public/shell/config.json renamed to shell-ui/public/config.json

File renamed without changes.

shell-ui/public/shell/deployed-ui-apps.json renamed to shell-ui/public/deployed-ui-apps.json

File renamed without changes.

‎shell-ui/rspack.config.ts‎

Lines changed: 50 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import path from 'path';
2+
import fs from 'fs';
23
import packageJson from './package.json';
3-
import { Configuration } from '@rspack/cli';
4+
import type { Configuration } from '@rspack/cli';
45
import * as rspack from '@rspack/core';
56
import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
67
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
@@ -12,6 +13,32 @@ const controlPlaneBaseUrl = `https://${controlPlaneIP}:8443`;
1213

1314
const isProduction = process.env.NODE_ENV === 'production';
1415

16+
let proxy = [
17+
{
18+
context: ['/static/js', '/.well-known'],
19+
target: 'http://localhost:3000',
20+
secure: false,
21+
},
22+
{
23+
context: [
24+
'/auth',
25+
'/api/kubernetes',
26+
'/api/salt',
27+
'/api/prometheus',
28+
'/api/alertmanager',
29+
'/api/loki',
30+
'/grafana',
31+
'/docs',
32+
],
33+
target: controlPlaneBaseUrl,
34+
secure: false,
35+
},
36+
];
37+
38+
if (fs.existsSync(path.join(__dirname, 'dev.proxy.json'))) {
39+
proxy = JSON.parse(fs.readFileSync(path.join(__dirname, 'dev.proxy.json'), 'utf8'));
40+
}
41+
1542
const config: Configuration = {
1643
experiments: {
1744
css: true,
@@ -110,18 +137,13 @@ const config: Configuration = {
110137
'./alerts/AlertProvider': './src/alerts/AlertProvider.tsx',
111138
'./alerts/alertHooks': './src/alerts/alertHooks.ts',
112139
'./navbar/navbarHooks': './src/navbar/navbarHooks.ts',
113-
'./moduleFederation/ConfigurationProvider':
114-
'./src/initFederation/ConfigurationProviders.tsx',
115-
'./moduleFederation/ShellConfigurationProvider':
116-
'./src/initFederation/ShellConfigProvider.tsx',
117-
'./moduleFederation/UIListProvider':
118-
'./src/initFederation/UIListProvider.tsx',
140+
'./moduleFederation/ConfigurationProvider': './src/initFederation/ConfigurationProviders.tsx',
141+
'./moduleFederation/ShellConfigurationProvider': './src/initFederation/ShellConfigProvider.tsx',
142+
'./moduleFederation/UIListProvider': './src/initFederation/UIListProvider.tsx',
119143
'./useNotificationCenter': './src/useNotificationCenter.ts',
120144
},
121145
shared: {
122-
...Object.fromEntries(
123-
Object.entries(deps).map(([key, version]) => [key, {}]),
124-
),
146+
...Object.fromEntries(Object.entries(deps).map(([key, version]) => [key, {}])),
125147
'react-intl': {
126148
eager: true,
127149
singleton: true,
@@ -188,7 +210,7 @@ const config: Configuration = {
188210
excludedChunks: ['shell'],
189211
}),
190212
new rspack.CopyRspackPlugin({
191-
patterns: [{ from: 'public/shell' }],
213+
patterns: [{ from: 'public' }],
192214
}),
193215
process.env.RSDOCTOR && new RsdoctorRspackPlugin({}),
194216
].filter(Boolean),
@@ -205,27 +227,23 @@ const config: Configuration = {
205227
},
206228
},
207229
static: path.join(__dirname, 'public'),
208-
proxy: [
209-
{
210-
context: ['/static/js', '/.well-known'],
211-
target: 'http://localhost:3000',
212-
secure: false,
213-
},
214-
{
215-
context: [
216-
'/auth',
217-
'/api/kubernetes',
218-
'/api/salt',
219-
'/api/prometheus',
220-
'/api/alertmanager',
221-
'/api/loki',
222-
'/grafana',
223-
'/docs',
224-
],
225-
target: controlPlaneBaseUrl,
226-
secure: false,
227-
},
228-
],
230+
proxy: proxy,
231+
setupMiddlewares: (middlewares, devServer) => {
232+
devServer.app.get('/shell/config.json', (req, res) => {
233+
const devConfigPath = path.join(__dirname, 'public/dev.config.json');
234+
const defaultConfigPath = path.join(__dirname, 'public/config.json');
235+
const configPath = fs.existsSync(devConfigPath) ? devConfigPath : defaultConfigPath;
236+
res.sendFile(configPath);
237+
});
238+
239+
devServer.app.get('/shell/deployed-ui-apps.json', (req, res) => {
240+
const devConfigPath = path.join(__dirname, 'public/dev.deployed-ui-apps.json');
241+
const defaultConfigPath = path.join(__dirname, 'public/deployed-ui-apps.json');
242+
const configPath = fs.existsSync(devConfigPath) ? devConfigPath : defaultConfigPath;
243+
res.sendFile(configPath);
244+
});
245+
return middlewares;
246+
},
229247
},
230248
};
231249

‎ui/public/config.json‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎ui/public/manifest.json‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎ui/rspack.config.ts‎

Lines changed: 50 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import path from 'path';
22
import packageJson from './package.json';
3-
import { Configuration } from '@rspack/cli';
3+
import type { Configuration } from '@rspack/cli';
44
import * as rspack from '@rspack/core';
55
import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
6+
import { MicroAppRuntimeConfigurationPlugin } from '@scality/module-federation';
67
import fs from 'fs';
78

89
const deps = packageJson.dependencies;
@@ -11,17 +12,19 @@ const isProduction = process.env.NODE_ENV === 'production';
1112

1213
let version = process.env.VERSION;
1314
if (!version) {
14-
const versionFileContents = fs.readFileSync(
15-
path.join(__dirname, '../VERSION'),
16-
{ encoding: 'utf-8' },
17-
);
15+
const versionFileContents = fs.readFileSync(path.join(__dirname, '../VERSION'), { encoding: 'utf-8' });
1816
const versionRegex =
1917
/.*VERSION_MAJOR=(?<versionMajor>\d+)(\n){0,1}.*VERSION_MINOR=(?<versionMinor>\d+)(\n){0,1}.*VERSION_PATCH=(?<versionPatch>\d+)(\n){0,1}.*VERSION_SUFFIX=(?<versionSuffix>.*)/m;
20-
const { versionMajor, versionMinor, versionPatch, versionSuffix } =
21-
versionRegex.exec(versionFileContents).groups;
18+
const { versionMajor, versionMinor, versionPatch, versionSuffix } = versionRegex.exec(versionFileContents).groups;
2219
version = `${versionMajor}.${versionMinor}.${versionPatch}${versionSuffix}`;
2320
}
2421

22+
const corsHeaders = {
23+
'Access-Control-Allow-Origin': '*',
24+
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
25+
'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
26+
};
27+
2528
const config: Configuration = {
2629
experiments: {
2730
css: true,
@@ -118,20 +121,16 @@ const config: Configuration = {
118121
exposes: {
119122
'./FederableApp': './src/FederableApp.tsx',
120123
'./platformLibrary': './src/services/platformlibrary/k8s.ts',
121-
'./AlertsNavbarUpdater':
122-
'./src/components/AlertNavbarUpdaterComponent.tsx',
123-
'./Metalk8sLocalVolumeProvider':
124-
'./src/services/k8s/Metalk8sLocalVolumeProvider.ts',
124+
'./AlertsNavbarUpdater': './src/components/AlertNavbarUpdaterComponent.tsx',
125+
'./Metalk8sLocalVolumeProvider': './src/services/k8s/Metalk8sLocalVolumeProvider.ts',
125126
},
126127
remotes: !isProduction
127128
? {
128129
shell: 'shell@http://localhost:8084/shell/mf-manifest.json',
129130
}
130131
: undefined,
131132
shared: {
132-
...Object.fromEntries(
133-
Object.entries(deps).map(([key, version]) => [key, {}]),
134-
),
133+
...Object.fromEntries(Object.entries(deps).map(([key, version]) => [key, {}])),
135134
'@scality/module-federation': {
136135
singleton: true,
137136
},
@@ -168,16 +167,47 @@ const config: Configuration = {
168167
NODE_ENV: process.env.NODE_ENV,
169168
PUBLIC_URL: JSON.stringify('/'),
170169
}),
170+
new MicroAppRuntimeConfigurationPlugin(
171+
{
172+
kind: 'MicroAppRuntimeConfiguration',
173+
apiVersion: 'ui.scality.com/v1alpha1',
174+
metadata: {
175+
kind: 'metalk8s-ui',
176+
name: 'metalk8s.eu-west-1',
177+
},
178+
spec: {
179+
title: 'MetalK8s Platform',
180+
selfConfiguration: {
181+
url: '/api/kubernetes',
182+
url_salt: '/api/salt',
183+
url_prometheus: '/api/prometheus',
184+
url_grafana: '/grafana',
185+
url_doc: '/docs',
186+
url_alertmanager: '/api/alertmanager',
187+
url_loki: '/api/loki',
188+
flags: [],
189+
ui_base_path: '/',
190+
url_support: 'https://github.com/scality/metalk8s/discussions/new',
191+
},
192+
auth: {
193+
kind: 'OIDC',
194+
providerUrl: '/oidc',
195+
redirectUrl: 'http://localhost:8084/',
196+
clientId: 'metalk8s-ui',
197+
responseType: 'code',
198+
scopes: 'openid profile email groups offline_access audience:server:client_id:oidc-auth-client',
199+
providerLogout: true,
200+
},
201+
},
202+
},
203+
'METALK8S_RUNTIME_',
204+
corsHeaders,
205+
),
171206
],
172207
devServer: {
173208
port: 3000,
174209
hot: !isProduction,
175-
headers: {
176-
'Access-Control-Allow-Origin': '*',
177-
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
178-
'Access-Control-Allow-Headers':
179-
'X-Requested-With, content-type, Authorization',
180-
},
210+
headers: corsHeaders,
181211
static: path.join(__dirname, 'public'),
182212
client: {
183213
overlay: {

0 commit comments

Comments
 (0)